Làm thế nào để các hiệu ứng jQuery chạy theo trình tự, không phải đồng thời?

Question

Làm cách nào để có hai hiệu ứng trong jQuery chạy theo trình tự, không phải đồng thời? Lấy đoạn mã này ví dụ:

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

fadeOut và fadeTrong cùng một thời gian, làm cách nào để chúng chạy sau cái kia?

Answer 1

Bạn có thể cung cấp gọi lại cho các chức năng hiệu ứng chạy sau khi hiệu ứng đã hoàn tất.

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

Answer 2

Điều bạn muốn là hàng đợi.

Kiểm tra trang tham chiếu http://api.jquery.com/queue/ để biết một số ví dụ hoạt động.

Answer 3

Có phải là mục tiêu không? chắc chắn bạn có thể sử dụng một mục tiêu ngẫu nhiên để xếp hàng các sự kiện tuần tự miễn là mục tiêu là hằng số ... dưới đây tôi đang sử dụng phụ huynh của một mục tiêu hoạt hình để lưu trữ hàng đợi.

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

Không chắc chắn nếu có thể nhưng có vẻ như bạn có thể ràng buộc .dequeue() để kích hoạt khi một sự kiện jquery khác kích hoạt, thay vì kích hoạt nội tuyến trong ví dụ trên? ngăn chặn hiệu quả hàng đợi hoạt ảnh?

Answer 4

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