使用延迟一秒来嵌套另一个动画

Question

我目前正在使用超时，但我想使用延迟。当我传递第一个动画的第二个动画时，我想让另一个动画开始，这是一个线性动画。如何检测每个动画何时结束？

http://jsfiddle.net/ohtkmes8/4/

$('#coolDiv2').css({ 
    left: $('#container').width() - $('#coolDiv').width() 
}); 
$("#coolDiv").css({ 
    left: $('#container').width() - ($('#coolDiv').width() + $('#coolDiv2').width()) 
}).animate({"left":"0px"}, 9000); 
setTimeout(function(){ 
    $('#coolDiv2').animate({"left":"50px"}, 9000); 
}, 1000); 

<div id="container"> 
    <div id="coolDiv">cool</div> 
    <div id="coolDiv2">other text</div> 
</div> 

Answer 1

jQuery的animate方法接受一个回调参数当动画完成被称为：

$("#coolDiv").css({ 
    left: $('#container').width() - ($('#coolDiv').width() + $('#coolDiv2').width()) 
}).animate({"left":"0px"}, 9000, function() { 
    $('#coolDiv2').animate({"left":"50px"}, 9000); 
});