Comment gérer les intervalles de temps entre les animations?

Question

Pour expliquer ma question, j'ai créé ce http://jsfiddle.net/Jams/XNVB2/ ici je veux quand div1 complète son animation de 25% puis div2 devrait commencer son animation et quand div1 complète son animation 50% alors div3 devrait commencer son animation.

Voici le code jquery

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

Answer 1

Cela devrait fonctionner: 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); 

Alternativement, vous pouvez aussi le faire avec 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(); 
});