如何在點擊時爲動畫製作一系列動畫？

Question

我有一系列元素，我希望通過點擊一個接一個地進行動畫。第一個動畫，但下一個不會。我在這裏錯過了什麼？

DEMO

$(document).ready(function() { 
    $('.button').click(function() { 
     $('.slide').next().animate({"top" : "5000"}, 500); 
    }) 
}); 

Answer 1

你可以試試這個 - DEMO

$(document).ready(function(){ 
    var i = $(".slide").length; 

    $('.button').click(function() { 
     i--; 
     $('.slide').eq(i).animate({"top" : "5000"}, 500); 
    }) 
}); 

Answer 2

你的選擇是不是做你的想法。

$('.slide').next().animate({"top" : "5000"}, 500); 

$('.slide')這是選擇離開課程幻燈片的所有元素。這意味着它正在選擇「滑動藍色」，「滑動紅色」，「滑動黃色」和「滑動黑色」。

$('.slide').next()這需要您選擇的所有幻燈片的下一個兄弟（如果有的話），即「幻燈片藍色」，「幻燈片紅色」和「幻燈片黃色」。

您的動畫效果是藍色，紅色和黃色，頂部只剩下黑色。

後續按鈕不會執行任何操作，因爲黑色沒有左邊的兄弟。

Answer 3

這樣做：

添加了類所有元素（只是將它們標記爲），那麼使用此代碼：

$(document).ready(function(){ 



    $('.button').click(function(){ 
     var slide = $('.slide.up').last(); 
     slide.toggleClass('up'); 
     slide.animate({"top" : "5000"}, 500); 
    }) 

}); 

測試，並預計

它適用於您的jsfiddle