CODEWITHSUNDEEP
javascriptjqueryanimation
Amit
Amit

Reputation: 22086

How to maintain time intervals between animation?

To explain my question I have created this http://jsfiddle.net/Jams/XNVB2/ here I want when div1 complete its 25% animation then div2 should start its animation and when div1 complete its 50% animation then div3 should start its animation.

Here is jquery code

$("#div1").animate({width:400},2000);
$("#div2").animate({width:400},2000);
$("#div3").animate({width:400},2000);

Upvotes: 0

Views: 112

Answers (1)

Kevin Ennis
Kevin Ennis

Reputation: 14466

This should work: http://jsfiddle.net/XNVB2/1/

$("#div1").animate({
    width: 400
}, 2000);
setTimeout(function () {
    $("#div2").animate({
        width: 400
    }, 2000);
}, 500);
setTimeout(function () {
    $("#div3").animate({
        width: 400
    }, 2000);
}, 1000);

Alternately, you could also do this with queue: http://jsfiddle.net/XNVB2/2/

var animLength = 2000;
$("#div1").animate({width:400},animLength);
$("#div2").delay(animLength * 0.25).queue(function(n){
    $(this).animate({width:400},animLength);
    n();
});
$("#div3").delay(animLength * 0.5).queue(function(n){
    $(this).animate({width:400},animLength);
    n();
});

​

Upvotes: 4

Related Questions