jQuery: Fade Out - Do Something - Fondu Motif

Question

me semble écrire régulièrement le code jQuery d'un modèle similaire à ceci:

Fade Out ==> Do Something Dans les coulisses ==> Fade In
Illustrated ci-dessous:

/// <reference path="jquery-1.4.2.js" /> 
/// <reference path="jquery-1.4.2-vsdoc.js" /> 
/// <reference path="jquery.validate-vsdoc.js" /> 
var fade = "slow"; 

$(document).ready(function() { 

    // Some event occurs 
    $("#Trigger").change(function() { 
     var id = $(this).find(":selected").val();   

     // Fade out target while I do something 
     $("#Target").fadeOut(fade, function() { 
      if (id != "") { 

       // Do Something 
       $("#Target").load(
        "/Site/Controller/Action/"+id, null, 
        function() { 

         // Fade in Target 
         $("#Target").fadeIn(fade); 
        }); 
      } 
     }); 
    }); 
}); 

cela fonctionne très bien, mais la hiérarchie de rappel devient assez profond et Je me demande s'il y a un moyen plus facile de le faire ou une meilleure technique qui ne donne pas lieu à tant de niveaux de callbacks

Answer 1

utilisation jQuery's .queue

$("#Target") 
    .fadeOut() 
    .queue(function() { 
     if (id != "") 
      // Do Something 
      $(this).load(
       "/Site/Controller/Action/"+id, null, 
       $(this).dequeue 
      ); 
     else 
      $(this).dequeue(); 
    }) 
    .fadeIn() 

Answer 2

Avec jQuery.queue(), vous pouvez ajouter plusieurs commandes à exécuter dans la séquence. La façon dont vous l'utilisez dépend de ce que vous voulez faire. Voici deux solutions:

1) ciblant un seul élément:

$('#label') 
    .fadeOut()      //animate element 
    .queue(function() {   //do something method1 
     ...your code here... 
     $(this).dequeue //dequeue the next item in the queue 
    }) 
    .queue(function (next) {   //do something method2 
     ...your code here... 
     next(); //dequeue the next item in the queue 
    }) 
    .delay(5000)     //do lots more cool stuff. 
    .show("slow") 
    .animate({left:'+=200'},2000) 
    .slideToggle(1000) 
    .slideToggle("fast") 
    .animate({left:'-=200'},1500) 
    .hide("slow") 
    .show(1200) 
    .slideUp("normal", runIt) 
    .fadeIn() 

2) Vous pouvez regarder une autre Way- créer une fonction de file d'attente qui fait beaucoup de choses, puis l'exécuter chaque fois que vous voulez:

var $header = $("#header"); 
var $footer = $("#footer"); 

function runIt() { 
    $header.queue(function(next){ 
     ...do something... 
     next(); 
     } 
    $header.queue(function(next){ 
     functionABC(variable, next); 
     }) 
    $footer.animate({left:'+=200'},2000); 
    $("#left").slideToggle(1000); 
    $(".class1").slideToggle("fast"); 
    $(".class2").animate({left:'-=200'},1500); 
    $("whatever").delay(3000); 
    $(".class3").hide("slow"); 
     } 

    runIt(); //execute it now, or... 

    $(window).load(function() { //execute it after the page loads! 
     runIt(); 
    }) 

Vous pouvez également utiliser la file d'attente: false variable. Cela signifie que la file d'attente n'attendra pas que cette opération se termine, donc elle démarrera immédiatement. Il est utile de faire deux animations ensemble:

function runIt() { 
    $("#first").animate(
     {width: '200px'}, 
     {duration:2000, queue:false} 
    ); 
    $footer.animate(
     {left:'+=200'}, 
     2000 
    ); 
} 

Avec AJAX, les files d'attente sont un peu plus compliquées. Découvrez ce poste:

AJAX Queues on this post.