jquery - 通过拖动另一个元素来为元素添加动画

Question

这是一个场景:我正在尝试使用 jquerydraggable() 实现一个操纵杆，并根据操纵杆的 y 坐标，我将向左或向右移动一个 div(如果 y 为正，则移动到向右；否则如果 y 为负数，则向左移动)。我已经完成了这部分，但我的问题是何时停止动画。

示例；

1. 如果我向上/向下拖动操纵杆并按住，div 不应停止移动。只有当我释放操纵杆时它才应该停止。我怎样才能做到这一点？我曾尝试添加这个:

   stop: function(){ $(div).stop() }//应该停止动画

2. 如何停止事件排队？

有什么建议吗？或者有人可以指出我哪里出错了？谢谢。

我在这里创建了一个 fiddle :http://jsfiddle.net/j3toxicat3d/cKd8k/2/

Answer 1

您需要使用.clearQueue。

stop: function(){ $(div).clearQueue() }

每次拖动都会使更多动画排队，因此它们会一个接一个地播放。表示速度的 fast 关键字为 200 毫秒，因此加起来的时间越长，持续的时间就越长，因为 stop 仅停止当前动画。

更新:

http://jsfiddle.net/cKd8k/3/

将一些功能移至拖动内容之外。