当其他 div 动画完成时开始动画 div答案

【问题标题】：Start animating div when the other div animations completes当其他 div 动画完成时开始动画 div
【发布时间】：2009-03-27 14:21:59
【问题描述】：

我正在制作一个相当复杂的 jquery-to be 动画，它可以根据不同的触发事件移动各种 div。为了简化我试图解决的场景是：

屏幕上有 DIV 1 和 DIV 2
DIV 1 需要从位置 A 动画到位置 B
DIV 2 还需要从位置 C 动画到位置 D，但仅当 DIV 1 到达位置 B 时。

我应该怎么做这样的事情？

我想我需要使用trigger/event listener 机制，如果 DIV 2 进入睡眠状态，并且只有在 DIV 1 到达屏幕上的位置 B 时触发的事件才会唤醒。

这是我应该拥有的最佳心态吗？我如何使用 jQuery 来做到这一点。

非常感谢。

【问题讨论】：

标签： jquery jquery-ui animation events event-handling

【解决方案1】：

animate 函数允许您指定在动画结束时运行的回调：

$('#div1').animate({...}, 1000, 'linear', function() {
    $('#div2').animate({...}, 1000);
});

【讨论】：

我了解并了解animate的回调函数。但是，屏幕上的 div 太多了，无法以这种方式对它们进行嵌套动画处理。我需要每个 div 让它们的动画功能独立运行。

【解决方案2】：

jQuery 有一个animate function 接受回调。在那里为 DIV 2 设置动画。

div1.animate({ ... }, 'slow', 'linear', function() {
    div2.animate({ ...}, ...);
});

【讨论】：

【解决方案3】：

我最终想出了以下解决方案来解决我的情况：

div1.animate(
   {...},
   'complete' : function() {
      div2.trigger('myStartMove');
   }
);

div2.bind('myStartMove', function(ev){
   div2.animate(
      {...}
   );
});

我发现最好使用触发器而不是在完整回调中直接调用嵌套动画。对于我拥有的复杂动画，使我的编码更加清晰。

【讨论】：

请注意，第一个示例不起作用。 “完成”需要在另一个对象中，因此如果您希望它传递给动画，则需要将其包裹在花括号中。