jQuery - why is attribute not being removed? .removeAttr
<p>I've created a fiddle to demonstrate my issue: <a href="http://jsfiddle.net/motocomdigital/QyhpX/5/" rel="nofollow">http://jsfiddle.net/motocomdigital/QyhpX/5/</a></p>

<p><br /></p>

<p><strong>OVERVIEW</strong></p>

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

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

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

<p><br /></p>

<p><strong>PROBLEM</strong></p>

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

<p>Please see <a href="http://jsfiddle.net/motocomdigital/QyhpX/5/" rel="nofollow">jsfiddle</a> <a href="http://jsfiddle.net/motocomdigital/QyhpX/5/" rel="nofollow">http://jsfiddle.net/motocomdigital/QyhpX/5/</a></p>

<p><em>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.</em></p>

<p><br /></p>

<p><strong>TAB CODE SCRIPT</strong></p>

<pre><code>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);                             
        }
    });
</code></pre>

<p><br /></p>

<p>Any help would be hugely appreciated. Thanks</p>

<p><a href="http://jsfiddle.net/motocomdigital/QyhpX/5/" rel="nofollow">http://jsfiddle.net/motocomdigital/QyhpX/5/</a></p>
