jQuery: attente pour effectuer une tâche jusqu'à la fin d'une animation

Question

J'ai une div qui est placée dans n'importe quelle page. Lorsque vous cliquez sur cette div, il sera fermé à l'aide jquery vérification de sa classe css:

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

Dans plusieurs pages, je dois définir cette div avec un identifiant spécifique afin d'effectuer certaines tâches après div fermé. Par exemple:

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

L'exemple ci-dessus est déclencheur sur cette div avec l'ID spécifique = divleft. Le problème est que je voudrais vérifier quelque chose UNIQUEMENT après que la div est vraiment fermée, mais dans ma situation actuelle, runTask() est effectuée avant la fermeture de div. Donc, ma question est la suivante: comment la méthode runTask() a-t-elle pu être lancée? est retardé après la div est vraiment fermé?

Merci d'avance !!!!

Answer 1

Je pense que ce que vous recherchez est .queue(). Voir la documentation ici:

Vous pouvez appeler cela sur un ensemble d'éléments correspondants pour obtenir des informations sur les effets restants à exécuter. Donc, dans votre cas, vous pouvez faire quelque chose comme ceci:

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

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

une démonstration ici: http://jsfiddle.net/LeHHj/2/

Cette fois-ci fonctionne vraiment;)

Answer 2

Dans votre cas, il suffit d'utiliser $('.content-box-header').click(function() { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { runTask(); }); }

Answer 3

Vous pouvez stocker la fonction sur la div en utilisant jQuery's data() method.

Cela vous permet de définir une fonction « AfterClick » sur votre élément:

$('.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

Vous devez vérifier si l'élément que vous êtes désireux de runTask() sur est: animée et si oui « enregistrer » un rappel (via .data()) pour quand c'est fait

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