CODEWITHSUNDEEP
jquery
eric2872
eric2872

Reputation: 122

jQuery 2 animations one after another

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

Upvotes: 0

Views: 74

Answers (1)

3piece
3piece

Reputation: 168

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.

Upvotes: 1

Related Questions