Wie können jQuery-Effekte nacheinander und nicht gleichzeitig ausgeführt werden?

Question

Wie kann ich zwei Effekte in jQuery hintereinander ausführen, nicht gleichzeitig? Nehmen Sie dieses Stück Code zum Beispiel:

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal"); 
    $("#projects").fadeIn("normal"); 
}); 

Die fadeOut und die fadeIn gleichzeitig laufen, wie kann ich sie einer nach dem anderen laufen zu lassen?

Answer 1

Sie können den Effektfunktionen, die ausgeführt werden, nachdem der Effekt abgeschlossen wurde, einen Rückruf bereitstellen.

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal", function() { 
     $("#projects").fadeIn("normal"); 
    }); 
}); 

Answer 2

Was Sie wollen, ist eine Warteschlange.

Überprüfen Sie die Referenzseite http://api.jquery.com/queue/ für einige Arbeitsbeispiele.

Answer 3

Muss es ein Ziel geben? Sicherlich können Sie ein zufälliges Ziel verwenden, um Ereignisse sequenziell in die Warteschlange zu stellen, solange das Ziel konstant ist ... unten verwende ich das Elternelement eines Animationsziels, um die Warteschlange zu speichern.

//example of adding sequential effects through 
//event handlers and a jquery event trigger 
jQuery(document).unbind("bk_prompt_collapse.slide_up"); 
jQuery(document).bind("bk_prompt_collapse.slide_up" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //running our timed effect 
     jQuery(this).find('div').slideUp(400); 
     //adding a fill delay to the parent 
     jQuery(this).delay(400).dequeue(); 
    }); 
});      
//the last action removes the content from the dom 
//if its in the queue then it will fire sequentially 
jQuery(document).unbind("bk_prompt_collapse.last_action"); 
jQuery(document).bind("bk_prompt_collapse.last_action" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //Hot dog!! 
     jQuery(this).remove().dequeue(); 
    }); 
}); 
jQuery("tr.bk_removing_cart_row").trigger( 
    "bk_prompt_collapse" , 
    jQuery("tr.bk_removing_cart_row") 
); 

nicht sicher, ob ihre möglich, aber es scheint, wie Sie .dequeue binden könnte() zu feuern, wenn ein anderer jquery-Ereignis ausgelöst, sondern inline in meinem Beispiel Brennen oben? effektiv eine Animationswarteschlange anhalten?

Answer 4

$("#foo").fadeOut(300).delay(800).fadeIn(400);