Don't Animate X If Animation X Already Running

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. :(

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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.