我正在使用这里给出的简单缓动动画，使用 JQUERY EASING PLUGIN
即从 left:200 到 left:0 再返回一个 div。（上页的最后一个示例）
我在一个容器 div 中有多个 div。我想做的是通过以下方式为 4 个 div 设置动画：
1] 假设我有两个 div，div1 和 div2。 当 div1 动画，并且 动画正在进行 div2 动画应该开始。例如：当 div1 从 left=200 移动到 left=0 时，div2 动画应该在 div1 在左边时开始 = 100.
编辑 （注意：div的数量是可变的）
…………当当前动画正在进行，到达一个点下一个动画应该开始（所有div的动画效果都是一样的）。
2] 在迭代 div 集合并制作动画时，将下一个动画延迟给定的时间间隔。
有没有办法知道动画的开始？还是动画正在进行中？
谢谢大家
【问题讨论】：
标签： jquery jquery-animate
您可以使用 ':animated' 伪选择器来确定元素当前是否处于运动状态：
if ($('#div1').is(':animated')) {
// do something
}
http://api.jquery.com/animated-selector/
您也可以尝试step 选项来检查 div2 应该何时开始动画：
$('#div1').animate({
left:0
},{
step: function() {
// check distance and animate div2 when it reaches 100
}
});
【讨论】：
您正在寻找的答案在于“步骤”参数。
您可以定义一个 step 参数，该参数在整个动画的范围内以一致的方式调用。在每一步，您都可以检查动画的进度，如果达到阈值，您可以触发第二个动画。
例如：
$item1 = $("#myItem1");
$item2 = $("#myItem2");
$item1.animate({width: 500}, {
duration: 1000,
step: function(now, fx) {
if (fx.state > 0.5 && fx.prop === "width") {
if(!$item2.is(':animated')) // Make sure you didn't start the animation already
$item2.animate({width: 500}, 1000);
}
}
})
这个想法适用于任意数量的 div，但显然您必须采用该概念并对其进行修改以适应您的情况。如果这有帮助，请告诉我！
在此处阅读有关步进函数的更多信息：http://api.jquery.com/animate/
【讨论】：
您可以使用一个函数在一个地方管理动画。
setTimeout(doAnimate($div1),100);setTimeout(doAnimate($div2),200);
等等
【讨论】：
您可以为动画函数添加回调：
$('#div1').animate(
{ left: 0 },
{ duration: 'slow', easing: 'easeOutBack' },
function(){
//Do what you want in here, it will be executed once the animation above is completed.
)};
【讨论】：