JQuery - why attribute is not removed? .RemoveAttr

Question

I created a fiddle to demonstrate my problem: http://jsfiddle.net/motocomdigital/QyhpX/5/

Overview

I am creating a tabbed website using jQuery .animate function. Which on my live site seems like a glitch on the first rotation, but I can’t play it in the violin.

The left tab animates the correct positioning of the div#wrapper to -170px and back to 0 - then I added .removeAttr('style'); to remove the style attribute so that it does not interfere with the right tab.

On the right tab, div#wrapper animates left positioning to -170px and back to 0 - then I added .removeAttr('style'); to remove the style attribute so that it does not interfere with the left tab.

PROBLEM

.removeAttr('style'); does not remove the inline style attribute after .animate completes, which is why my left tab will be dysfunctional if the right tab is open.

See jsfiddle http://jsfiddle.net/motocomdigital/QyhpX/5/

Also, did anyone notice any crashes when opening the first tab the first time? Left or right? It seems that it hangs on the first opening, and then suddenly opens, but gradually closes and then smoothly opens. Its just the first click.

TAB CODE SCRIPT

 var $tabLeft = $(".tab-left-button span"), $tabRight = $(".tab-right-button span"), $siteSlide = $("#wrapper"); $tabLeft.on('click', function () { if ($tabLeft.html() == 'X' ) { $siteSlide.stop().animate({ right: "0" }, 300); $tabLeft.html('Tab Left'); return false; $siteSlide.removeAttr('style'); } else { $siteSlide.stop().animate({ right: "-170px" }, 300); $tabLeft.html('X'); $('body,html').animate({ scrollTop: 0 }, 800); } }); $tabRight.on('click', function () { if ($tabRight.html() == 'X' ) { $siteSlide.stop().animate({ left: "0" }, 300); $tabRight.html('Tab Right'); return false; $siteSlide.removeAttr('style'); } else { $siteSlide.stop().animate({ left: "-170px" }, 300); $tabRight.html('X'); $('body,html').animate({ scrollTop: 0 }, 800); } }); 

Any help would be greatly appreciated. Thanks

http://jsfiddle.net/motocomdigital/QyhpX/5/

Answer 1

As @JamesMcLaughlin correctly mentioned, before calling .removeAttr you have a return . This is what we call "unreachable code."

However, even if you switch these statements, it still won't work, because .animate() works asynchronously. This means that after the animation finishes, you need to call .removeAttr , for example:

 $siteSlide.stop().animate({ right: "0" }, 300, function _afterAnimation() { $siteSlide.removeAttr('style'); }); 

Answer 2

You return from the function first, so the line will never be executed. Change:

  return false; $siteSlide.removeAttr('style'); 

to

  $siteSlide.removeAttr('style'); return false; 

(and then buy a good JavaScript book).

Answer 3

http://jsfiddle.net/Simplybj/QyhpX/12/ - is that what you want?

Answer 4

I had a similar problem, but not exactly, animate() blocked the execution of removeAttr() . Just adding stop() to the chain will get removeAttr() again:

 $example.animate({ opacity: "0", }, 700); $example.stop().removeAttr("style");