New jQuery API to allow synchronous operations dur

Question

Unless I'm mistaken, since jQuery 1.5, you can somehow do chaining and insert a command to have it wait for the previous operation to complete. In other words, instead of this:

$('#something').animate({opacity: 0}, 500, function() { $('#something').hide(); });

You can do:

$('#something').animate({opacity: 0}, 500).waitForIt().hide();

Of course I could be wrong. I know there's delay() and a "queue" option for animate(), but I think those apply to queueable FX only, not one-shots like show/hide.

Answer 1

Where did you find mention of that feature? To my knowledge, even jQuery 1.5's deferred objects cannot be used that easily with animate().

Fortunately, Dan Heberden wrote some very nice code that makes the syntax clearer. Using his solution, you can write something like:

var $something = your$('#something');
$.when($something.animate({opacity: 0}, 500)).done(function() {
    $something.hide();
});

Which, of course, is a lot more verbose than simply passing a callback to animate() in the first place.

EDIT: jQuery 1.6 now implements that feature natively. You can actually do:

var $something = $('#something');
$.when($something.animate({opacity: 0}, 500)).done(function() {
    $something.hide();
});

That's still overkill for simple animations, but quite useful if you're already using deferred objects and want to incorporate animations into your AJAX request flow.

Answer 2

what could do is:

var animationTime = 500;
$('#something').animate({opacity: 0}, animationTime, function(){
    $(this).hide();
})

working fiddle: http://jsfiddle.net/maniator/VbANC/32/

The function as the last param of the animate call only runs after the animation has run its course
There is not to my knowlegde any waitForIt call.

i made a plugin for delay of a jQuery call:

http://jsfiddle.net/maniator/Ad3pv/

call it like so:

$('div').waitForit({
    function: 'hide', 
    timeOut: 1000
});