JQuery: wait for task to complete before animation

Question

I have a div that fits on any page. When you click on this div, it will be closed using jquery validation in its css class:

$('.content-box-header').click(function () { $(this).parent().children('.content-box-content').slideFadeToggle(200); } 

On several pages, I need to set this div with a specific identifier in order to perform some tasks after closing the div. For instance:

 $('#divleft').live('click', function (e) { runTask(); } 

The above sample is a trigger for this div with a specific id = divleft.

The problem is that I would like to check something ONLY after the div is really closed, but in my current situation, runTask () is executed before the div is closed.

So my question is how can the runTask () method; lingers after the div is really closed?

Thanks in advance!!!!

Answer 1

I think you are looking for .queue (). See the documentation here: http://api.jquery.com/queue/

You can call this by a set of matched elements to get some information about the remaining effects that will be performed. So in your case, you can do something like this:

 $('#divleft').live('click', function (e) { runTaskAfterAnimation() }); function runTaskAfterAnimation() { if ($('.content-box-content').queue('fx').length == 0) { runTask(); } else { setTimeout(runTaskAfterAnimation, 10); } } 

Check out the demo here: http://jsfiddle.net/LeHHj/2/

This time it definitely works;)

Answer 2

In your case, just use $('.content-box-header').click(function () { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { runTask(); }); }

Answer 3

You can save the function in a div using the jQuery data () method .

This allows you to set the afterClick function on your element:

 $('.content-box-header').click(function () { var $this = $(this); $this.parent().children('.content-box-content').slideUp(200, function () { var after = $this.data('afterClick'); if (after) after(); }); }); $('#divleft').data('afterClick', function () { runTask(); }); 

Answer 4

You need to check if the element you want to run is (a): animated and if so register the callback (via .data ()) when it is done

 .live('click', doRunTask); doRuntask = function() { if ($(this).is(':animated')) $(this).data('afterAnimation', runTask); else runTask(); }); $('.content-box-header').click(function () { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { var cb = $(this).data('afterAnimation'); cb && cb(); }); }