jQuery file events

Question

Donc ce que je veux faire est de coordonner certains effets en utilisant jQuery pour certains appels AJAX avec lesquels je travaille. Mon problème est que le fadeIn pour le second div se déclenche en même temps avec le fadeOut pour le premier div.

Cela pourrait également s'appliquer à d'autres événements, donc je suis curieux, est-il possible de lancer fadeId UNIQUEMENT après que fadeOut soit terminé?

jQuery("#div1").fadeOut("slow"); 
jQuery("#div2").fadeIn("slow"); 

Merci

Answer 1

Vous pouvez le faire en utilisant un rappel. Découvrez le jQuery docs.

jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); }); 

Presque tous les effets jQuery prennent un rappel à exécuter une fois l'effet terminé.

Answer 2

qui est généralement assez bon pour une animation rapide, mais si vous voulez faire la queue un certain nombre d'effets, vous pouvez également utiliser la file d'attente() et dequeue() comme ceci:

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
}); 

Ici, la file d'attente() ajoute une fonction à la file d'attente de l'objet (qui ne doit pas nécessairement être une animation) et dequeue() exécute cette fonction. Pour plus d'informations, reportez-vous au docs.

Answer 3

Il y avait quelques fautes de frappe dans l'exemple ci-dessus qui l'a empêché de travailler dans Firefox, la version corrigée:

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
});