在JQuery Sortable中，如何在恢复动画启动之前运行函数？

Question

一个例子JQuery的排序片段：

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

我想我的叠加至少开始隐藏前的复归动画开始，因为感觉慢，否则。有任何想法吗？

Answer 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