jQuery: wait to perform a task until an animation finished

Question

I have a div which is placed in any pages. When you click on this div, it will be closed by using jquery checking on its css class:

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

In several pages, I need to set that div with a specific ID in order to perform some tasks after that div closed. For example:

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

The above sample is trigger on that div with the 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 performed before the div is closed.

SO my question is that how could the method runTask(); is delayed after the div is really closed?

Thanks in advance!!!!

Answer 1

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

Answer 2

You can store the function on the div using jQuery's data() method.

This lets you set an '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 3

You need to check if the item you are wanting to runTask() on is :animated and if so 'register' a callback (via .data()) for when it's 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();
 }); 
}

Answer 4

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

You can call this on a set of matched elements to get some information about the remaining effects to be run. So in your case you could 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);
    }
}

View a demonstration here: http://jsfiddle.net/LeHHj/2/

This time it definitely works ;)