Hoàn thành một hoạt ảnh rồi bắt đầu một hoạt ảnh khác

Question

Tôi có hai div và hai liên kết riêng biệt kích hoạt slideDown và slideUp cho các div.

Khi một trong số các div bị trượt xuống và tôi nhấp vào cái kia, tôi ẩn div đầu tiên (trượt lên) và sau đó mở div khác (slidingDown) nhưng, tại thời điểm nó giống như khi một div bị trượt xuống, khác, cũng trong cùng một thời gian, là trượt lên.

Có cách nào có thể yêu cầu jQuery chờ kết thúc trượt xuống của một div và chỉ sau đó bắt đầu trượt lên một div khác?

Answer 1

$('#Div1').slideDown('fast', function(){ 
    $('#Div2').slideUp('fast'); 
}); 

Chỉnh sửa: Bạn đã kiểm tra ra các plugin accordion (nếu đó là những gì bạn đang cố gắng để làm)?

Answer 2

Hầu hết các chức năng jquery đều có tham số gọi lại, bạn chỉ có thể chuyển một hàm vào đó.

Answer 3

$("#thisDiv").slideUp("slow", function() { 
    // This function is called when the slideUp is done animating 
    $(this).doNextThing(); 
}); 

Answer 4

Sử dụng tham số thứ hai của hàm: gọi lại. Ví dụ,

 
$(this).slideDown(speed, function(){ 
    $(this).slideUp(); 
}); 

Answer 5

Bạn có thể sử dụng một callback để bắn một hiệu ứng tiếp theo khi lần đầu tiên được thực hiện:

$("#element1").slideUp(
    "slow", 
    function(){ 
     $("#element2").slideDown("slow"); 
    } 
); 

Trong ví dụ này, hàm được định nghĩa như là đối số thứ hai với phương pháp slideUp được gọi sau khi hình ảnh động slideUp đã hoàn tất.

Xem tài liệu: http://docs.jquery.com/Effects/slideUp

Answer 6

Bạn nên chuỗi nó như thế này

function animationStep1() 
{ 
    $('#yourDiv1').slideUp('normal', animationStep2); 
} 

function animationStep2() 
{ 
    $('#yourDiv2').slideDown('normal', animationStep3); 
} 

// etc 

Tất nhiên bạn có thể thêm gia vị này lên với chức năng đệ quy, mảng giữ hàng đợi hoạt hình, vv, theo yêu cầu của bạn.

Answer 7

một ví dụ về điều này có thể được nhìn thấy trong JQuery for Beginners - Day 2

Có 15 ngày kể từ khi những hướng dẫn và họ là một nguồn lực tốt. Thưởng thức!

Answer 8

Một cắn dụ sạch hơn và với một sự chậm trễ giữa các hình ảnh động:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);