CODEWITHSUNDEEP
jqueryhtmljquery-animateslide
owen
owen

Reputation: 25

Jquery animate div right after other finishes

I have 2 divs animating in from left, at the moment they both come in at the same time one under the other, though I'd like to have the second begin right after the first finishes.

Heres the code: 

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000);

$("#flyin2").animate({
    left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
}, 2000);

Any help would be awesome!

Upvotes: 0

Views: 78

Answers (4)

Milind Anantwar
Milind Anantwar

Reputation: 82251

You can use complete of jquery animate.

Update: hide the element on document ready

$(document).ready(function(){
$("#flyin2").hide();//hide second element
});


$("#flyin1").animate({
left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000,function(){
//on animation complete
$("#flyin2").show();//show second element
$("#flyin2").animate({
left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
}, 2000);
});

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);
});

Put it under the third parameter (complete), as seen here. You could also do it like this:

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, {duration:2000}, {complete:function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);}
});

Upvotes: 2

Bartek Kosa
Bartek Kosa

Reputation: 842

Add function parameter to animation call

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
     }, 2000);
);

Upvotes: 0

BenM
BenM

Reputation: 53238

jQuery's animate() function supports a total of 4 parameters. You'll notice that one of them can be a function which will be called when the animation is completed:

complete
Type: Function()
A function to call once the animation is complete.

You can use the complete callback function:

$("#flyin1").animate({
    left: $("#flyin1").parent().width() / 2 - $("#flyin1").width() / 2
}, 2000, function() {  
    $("#flyin2").animate({
        left: $("#flyin2").parent().width() / 2 - $("#flyin2").width() / 2
    }, 2000);
});

Upvotes: 1

Related Questions