在 JQuery Sortable 中，如何在恢复动画开始之前运行一个函数？答案

【问题标题】：In JQuery Sortable, how can I run a function before the revert animation starts?在 JQuery Sortable 中，如何在恢复动画开始之前运行一个函数？
【发布时间】：2012-03-02 21:27:47
【问题描述】：

JQuery 可排序 sn-p 示例：

 $("#sortable").sortable({ 
     start: function(){ $('#overlay').show('fast'); });
     stop: function(){ $('#overlay').hide('fast'); });
     revert: true;
 });

我希望我的叠加层至少在还原动画开始之前开始隐藏，否则会感觉很慢。有什么想法吗？

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

不幸的是，还原动画在内部_clear()函数执行之前执行，触发事件beforeStop和stop。

一种可能的解决方法是为revert 选项提供一个数字而不是布尔值。来自documentation：

如果设置为 true，则项目将恢复到其新的 DOM 位置，并带有平滑的动画。或者，也可以设置为一个数字，以毫秒为单位控制动画的持续时间。

所以你可以设置一个较小的还原动画持续时间，例如 150 毫秒，这样看起来不会太慢：

$("#sortable").sortable({ 
     start: function(){ $('#overlay').show('fast'); },
     stop: function(){ $('#overlay').hide('fast'); },
     revert: 150
});

作为补充，您可以通过在开始拖动时在帮助程序上定义 one-time mouseup event 来替换 stop 事件，您将在其中开始隐藏您的 #overlay 元素。一旦释放鼠标按钮，处理程序将与还原动画一起执行：

$("#sortable").sortable({ 
     start: function(){
         // set a one-time "mouseup" event on the helper
         $(ui.helper).one('mouseup', function() {
             // when mouse button is released, "#overlay" will start hiding
             // along with reverting animation
             $('#overlay').hide('fast');
         });
         $('#overlay').show('fast'); 
     },
     revert: 150
});

DEMO

【讨论】：

我喜欢较慢的还原动画，但你的 mouseup 技巧正是我想要的。一旦你看到它，一切似乎都很明显:-) 感谢你为我制作 jfiddle 的额外时间！
好吧，我首先使用了还原动画，这更像是一个技巧，让我在制作小提琴时想到了实际的解决方案。很高兴它有帮助！