jQuery - why is attribute not being removed? .removeAttr

Question

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

OVERVIEW

I'm creating a tabbed website, using the jQuery .animate feature. Which on my live site seems a glitchy on the first alternation, but I can't seem to replicate it in the fiddle.

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

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

PROBLEM

The .removeAttr('style'); is not removing the inline style attribute after .animate completes, which causes my left tab to be disfunctional if the right tab has been opened.

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

Also does anyone notice any glitching on the first tab open alternation? Left or Right? It seems to hang on first opening, then suddenly it snaps open, but closes fine smoothly and then re-opens smoothly. Its just the first click opening.

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 hugely appreciated. Thanks

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

Answer 1

As @JamesMcLaughlin correctly mentioned, you have a return statement before your .removeAttr call. That is what we call 'unreachable code'.

However, even if you would switch those statements, it'll still not work, because .animate() works asyncronously. That means, you need to call .removeAttr once the animation entirely finished, like so:

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

Answer 2

You're returning 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 go buy a nice JavaScript book).