CODEWITHSUNDEEP
jquery
Joshc
Joshc

Reputation: 3853

jQuery - why is attribute not being removed? .removeAttr

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/

Upvotes: 4

Views: 7652

Answers (4)

user2449231
user2449231

Reputation: 584

I had a similar issue, but not exact, animate() was blocking removeAttr() from executing. Simply adding a stop() to the chain will get removeAttr() working again:

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

Upvotes: 0

mesimplybj
mesimplybj

Reputation: 639

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

Upvotes: 0

jAndy
jAndy

Reputation: 236022

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');
});

Upvotes: 9

James M
James M

Reputation: 16718

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).

Upvotes: 3

Related Questions