jQuery 2 animations one after another

Question

Say I have 2 animation buttons on a page. A user clicks on the first animation and it animates into place. I have it so the animation opens up and it stays there until the user clicks on somewhere else on the page. But when the user clicks on another animation trigger button while the other animation is still up, everything screws up and both animations go at the same time :(. So how would I delay the other animation until the closing animation on the animation is done? Jsfiddle: http://jsfiddle.net/hBb9L/17/

$("#e").click(function (e) {
    //done
    $("#re").animate({
        "margin-top": "104px"
    }, 800);
    $("#ret").animate({
        "margin-top": "104px"
    }, 800);
    $(".popu").animate({
        "margin-top": "-102px"
    }, 800);
    $("#s").show(200);
    e.stopPropagation();

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Jquery has an animated class you could use.

For your case you could wrap the collection of animations within each trigger/button inside an if statement checking for "is:animated:"

if($("#re").is(':not(:animated)') && $("#ret").is(':not(:animated)')) {
   .....
   .....
}

There are some other stack overflow answers for is:animated and :not(:animated).

This approach is somewhat cumbersome, another solution would be to create a boolean variable in place of the is:animated check, then set it while the animation is running:

 $(document).ready(function () {
     var inProgress = false;
     $("#s").hide(0);

 $("#e").click(function (e) {
    if(!inProgress) {
        inProgress = true;
        .....
    $("#s").show(200, function() {
           // inProgress = false;
        });
    }
  });
  ....

});

For completeness I've included the Updated Fiddle for you with both methods added. I've also changed the cursor for you while hovering over each tile.

I'd recommend checking out jquery stop() which stops any animations currently running for that element, and queue() which you could also adapt a solution with.

jQuery 2 animations one after another

1 Answers1