在JQuery Sortable中，如何在还原动画开始之前运行函数? [英] In JQuery Sortable, how can I run a function before the revert animation starts?

问题描述

示例JQuery可排序代码段:

An example JQuery sortable snippet:

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

我希望我的叠加层至少在开始播放动画之前隐藏开始，因为否则动画会很慢.有什么想法吗?

I'd like my overlay to at least start hiding BEFORE the revert animation begins, because it feels slow otherwise. Any ideas?

推荐答案

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

Unfortunately, the revert animation is executed before the internal _clear() function is executed which triggers the events beforeStopand stop.

一种可能的解决方法是为revert选项提供一个数字，而不是布尔值.从文档:

A possible workaround is to provide a number for the revert option instead of a boolean. From the documentation:

如果设置为true，则该项目将通过平滑的动画恢复到其新的DOM位置. (可选)还可以将其设置为控制动画持续时间(以毫秒为单位)的数字.

因此您可以设置较小的还原动画持续时间，例如150ms，这样看起来就不会太慢:

So you can set a smaller revert animation duration, for instance 150ms, so it does not look too slow:

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

作为补充，您可以通过定义一次mouseup事件在开始拖动时在助手上，您将开始隐藏#overlay元素.释放鼠标按钮后，处理程序将与还原动画一起执行:

In complement, you could replace the stop event by defining define a one-time mouseup event on the helper when you start the dragging, in which you will start hiding your #overlay element. As soon as the mouse button is released, the handler will be executed along with the revert animation:

$("#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

DEMO

这篇关于在JQuery Sortable中，如何在还原动画开始之前运行函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！