Jak wykonać efekty jQuery w sekwencji, a nie jednocześnie?

Question

Jak mogę uruchomić dwa efekty w jQuery w sekwencji, a nie jednocześnie? Weź ten kawałek kodu na przykład:

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

wyciszenia i fadeIn uruchomić jednocześnie, w jaki sposób uczynić je uruchomić jeden po drugim?

Answer 1

Możesz dostarczyć wywołanie zwrotne do funkcji efektów, które działają po zakończeniu efektu.

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

Answer 2

Co chcesz to kolejka.

Sprawdź na stronie referencyjnej http://api.jquery.com/queue/ kilka przykładów wykonania.

Answer 3

Czy musi być jakiś cel? z pewnością można użyć losowego celu, aby kolejkować zdarzenia sekwencyjnie, o ile cel jest stały ... poniżej używam elementu nadrzędnego celu animacji do przechowywania kolejki.

//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") 
); 

Nie wiesz, jeśli jego możliwości, ale wydaje się, że można powiązać .dequeue() do ognia, gdy kolejne jquery Zdarzenie, zamiast wypalania inline w moim przykładzie powyżej? skutecznie zatrzymać kolejkę animacji?

Answer 4

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