Question

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?

Answer 1

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

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

If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.

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
});

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