Don't Animate X If Animation X Already Running (inside keyup)

Question

The way it's currently written causes the hide to fire over and over if msg.d starts returning 'false' from 'true' until enough time has passed for the animation to stop.

Is there an isHiding or something?

Thanks in advance!

if(msg.d == "true") {
    if(!$("#addContactEmailError").is(":visible")) {
         $("#addContactEmailError").show('bounce');
    }
    $("#addContactSubmitButton").attr("disabled", true);
}
else {
    if($("#addContactEmailError").is(":visible")) {
         $("#addContactEmailError").hide('slide', { direction: "up" });
    }
    $("#addContactSubmitButton").attr("disabled", false);
}

Edit 1

This is all in a keyup handler.

Edit 2

Using animated only fires the animation when it's completed. If msg.d changes, but the now incorrect animation isn't finished, the correct animation won't fire.

Lame Solution

I used a global boolean to keep track of the state. I hate doing that. Putting up a bounty for a better solution when I can. Thanks to all!

Canceled Bounty

Sorry guys, didn't realize I had to buy with my own rep. :(

Yeargain

Have you tried $(elem).is(':animated')? – Reena

Side note, cache your selectors. Constantly querying the DOM even by ID is slow. – Korikorie

Thank you for that suggestion! This should probably speed up my gridview with cross checking checkboxes all over the place. – Yeargain

Answer 1

If you want to stop an animation, mid animation, and make it move from that stopped css state to another, use , most importantly, stop(true, false).

Bottom line: stop(true,false) "magically" stops the animation in its' tracks but considers the css to be set to whatever the stopped animation's css parameters were, so you can continue from that point without trying to guess or figure out how you should animate from the stopped point.

In other words, if you set the css through animate, but you stopped it, the element animated will remain at whatever css state the stop fired at, but the css settings that were entered in the stopped animation will be the current css settings until changed.

That's key. You don't have to guess where the stop left the css state. You can continue back as if your animation fully completed.

This is a demonstration of the basics of this concept: http://jsfiddle.net/dYYZP/65/

---

Ripped off the base animation from here: Jquery layered animation slide out from under

---

Postscript

Because of the ease of animate, absolute positioning within relative positioning, offset, and stop(true,false), it's rare that I use any of the built in animations. They're too clunky and don't know what you really need. They're great for the most basic animations, but if you want to make your page shine, those concepts above (which are very easy I might add), need to be harnessed.

Yeargain

Answer 2

You can check if it's currently being animated using the animated selector.

http://api.jquery.com/animated-selector/

Korikorie

What if it's in the process of showing? It's for a keyup. Probably should've added that important fact :/. – Yeargain

Answer 3

As above suggest use the ":animated" seclector

if(msg.d == "true") {
    var contact = $("#addContactEmailError");

    if(!contact.is(":visible") && !contact.is(":animated")) {
         contact.show('bounce');
    }
    $("#addContactSubmitButton").attr("disabled", true);
}
else {
    if(contact.is(":visible") && !contact.is(":animated")) {
         contact.hide('slide', { direction: "up" });
    }
    $("#addContactSubmitButton").attr("disabled", false);
}

Rupee

it trips over itself. if it's !animated, but msg.d's subsequently changed, it won't fire the animation – Yeargain

@JoeCoderGuy apologies for late reply could you provide a jsFiddle as a test case? – Rupee

sure, might take awhile. need to substitute the ajax etc. tia – Yeargain

Answer 4

Maybe you should use .stop().hide( and .stop.show( wherever you use hide and show.

Brecher