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 sto

Answer 1

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

Answer 2

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.

Answer 3

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

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

Answer 4

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