释放mousedown时如何停止jquery动画？

Question

现在我有一个简单的按钮设置，在按下鼠标时动画，并在释放鼠标时反转该动画的效果。动画会更改“顶部”，“左侧”和“盒式阴影”属性。我不得不使用一个特殊的jquery插件，以允许jquery的.animate（）函数影响元素的box-shadow。为便于参考，此处为GitHub repository of my current example。

问题是，即使立即释放鼠标按钮，动画也会在继续反转之前完成。期望的效果是用户通过按住或释放鼠标按钮来控制按钮是“向上”还是“向下”移动。请参阅this example（右侧的最后一个方框），了解我想要实现的目标。

到目前为止，在我的研究中，似乎应该使用绑定/解除绑定来完成此任务，但我看到的示例并未涉及在动画完成之前停止动画。

Answer 1

当你使用jQuery来制作动画时，

您可以使用.stop（）来

  

停止匹配元素上当前正在运行的动画。

OR

你也可以使用.finish（）来

  

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素的所有动画。

然后，您可以在动画停止时恢复到元素的原始值。