通过拖动另一个元素来制作元素动画

Question

这里有一个场景：我试图使用jquery draggable（）实现一个操纵杆，并基于操纵杆的y坐标，将div向左或向右移动（如果y为正，则向右移动；否则，如果y为负，则向左移动）。我已经完成了这一部分，但我的问题是什么时候停止动画。

示例；

1. 如果我向上/向下拖动操纵杆并按住，div就不会停止移动。只有当我松开操纵杆时，它才会停止。我怎样才能做到这一点？我试着添加了这个：

   stop: function(){ $(div).stop() } //should stop animation

2. 如何停止事件排队？

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

我在这里创作了一把小提琴：http://jsfiddle.net/j3toxicat3d/cKd8k/2/

Answer 1

您需要使用.clearQueue。

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

每次拖动都会将更多的动画排队，以便它们一个接一个地进行。表示速度的fast关键字是200ms，所以它加起来的时间越长，持续的时间就越长，因为stop只停止当前动画。

更新：

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

将一些功能移到拖动之外。