当另一个动画正在进行时，Jquery 动画

Question

我正在使用这里给出的简单缓动动画 JQUERY缓动插件
将 div 从 left:200 调整到 left:0 并返回。（上页的最后一个示例）

我在容器 div 中有多个 div。我想要做的是按以下方式对 4 个 div 进行动画处理：

1] 假设如果我有两个 div，div1 和 div2。 当 div1 处于动画状态并且动画正在进行时，div2 动画应该开始。例如：当 div1 从 left=200 移动到 left=0 时，div2 动画应该在 div1 位于 left = 时开始100.

编辑 （注意：div的数量是可变的）

.......

当当前动画正在进行时，并到达下一个动画应该开始的点（所有div的动画效果相同）。

2] 在迭代 div 集合和动画时，将下一个动画延迟给定的时间间隔。

有什么方法可以知道动画的开始吗？或者动画正在进行中？

谢谢大家

Answer 1

您可以使用 ':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
    }
});

http://api.jquery.com/animate/

Answer 2

您正在寻找的答案位于“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/

Answer 3

您可以使用一个函数在一个地方管理动画。

setTimeout(doAnimate($div1),100);setTimeout(doAnimate($div2),200); 

ETC。

Answer 4

您可以向 animate 函数添加回调：

$('#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.
)};