jquery - クリック時に一連のアニメーションをアニメーション化するにはどうすればよいですか?

Question

クリックで 1 つずつアニメーション化したい一連の要素があります。最初のものはアニメーションしますが、次のものはアニメーションしません。ここで何が欠けていますか？

デモ

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

Answer 1

これを試すことができます -デモ

$(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

これを行う：

すべての要素に up クラスを追加して (それらを up としてマークするためだけに)、次のコードを使用します。

$(document).ready(function(){



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

});

テスト済みで、jsFiddle で期待どおりに動作します