jQuery file d'attente des événements

Donc ce que je veux faire est de coordonner certains effets à l'aide de jQuery pour certains appels AJAX que je suis en train de travailler avec. Mon problème est que le fadeIn pour la deuxième div feux en même temps avec le fadeOut pour la première div.

Cela pourrait s'appliquer à d'autres événements, si bien que je suis curieux, est-il possible de faire fadeId lancement SEULEMENT après fadeOut est fait ?

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

Grâce

OriginalL'auteur |

  1. 13

    Vous pouvez faire cela en utilisant une fonction de rappel. Découvrez le jQuery docs.

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

    Quasiment tous les effets jQuery prendre un callback à exécuter après l'effet est plus.

    Merci, c'était ça! 🙂
    Dans la question, le fadeIn était d'environ une seconde div. Ne devrait pas votre code 'jQuery("#div2") " dans la fonction de rappel?
    Merci! Cela m'a aidé. J'étais occupé à essayer de comprendre la file d'attente lorsqu'il est cette simple!

    OriginalL'auteur

  2. 16

    C'est généralement suffisant pour une animation rapide, mais si vous voulez de la file d'attente d'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 à l'objet de la file d'attente (qui n'a pas à être une animation) et dequeue() exécute cette fonction.

    Voir le docs pour plus d'informations.

    OriginalL'auteur

  3. 3

    Il y avait quelques fautes de frappe dans l'exemple ci-dessus, qui l'empêchait 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();
});

    OriginalL'auteur