Question

我正在使用JQUERY EASING PLUGIN来使用简单的缓动动画即从左边开始的div：200到左：0和后面。（上一页的最后一个例子）

我在容器div中有多个div。我想要做的是以下列方式为4个div设置动画：

1]假设我有两个div，div1和div2。当div1被动画化，并且动画正在进行时，div2动画应该是start.eg：当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

您正在寻找的答案在于“步骤”参数。

您可以定义一个步长参数，该参数在整个动画的范围内以一致的方式调用。在每一步，您都可以检查动画的进度，如果它已达到阈值，您可以触发第二个动画。

例如：

$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);

等

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.
)};

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

4 个答案: