Question

我正在开发一个相当复杂的jquery-to动画，它根据不同的触发事件移动各种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做到这一点。

非常感谢。

Answer 1

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

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

Answer 2

jQuery有animate function接受回调。在那里动画DIV 2.

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

Answer 3

我最终提出了以下解决方案来解决我的问题：

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

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

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

当其他div动画完成时，开始动画div

3 个答案: