当另一个动画正在进行时,Jquery设置动画

可以使用“: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/

您要寻找的答案就在“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,尽管很明显,您必须接受这个概念并修改它以适应您的案例。请让我知道如果这有帮助!

请在此处阅读有关step函数的更多信息: 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.
)};