在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