jquery - jQuery：パネルを次々にスライドさせる

Question

これはあなた方の何人かにとって単純なものだと私は知っているので、私を助けてください！ボタンをクリックして次々にスライドさせたいパネル（div）が3つあります。1つのパネルをスライドさせるのは簡単ですが、複数のdivを順番にスライドさせる方法はありますか？ありがとう。

Answer 1

3つのdivにクラス「.slide_panel」を指定します。これにより、3つのdivがループされ、アニメーションが実行されます。

$("#button").click(function()
{
    var i = -1;
    var arr = $(".slide_panel");
    (function(){
    if(arr[++i])
    $(arr[i]).animate({ left: "300px" }, 100, "linear", arguments.callee)
    })();
});

デモページ→

コード

Answer 2

私はKaneのソリューションが本当に好きですが、JavaScript言語の「無名関数」とarguments.calleeの機能を知らないと、理解するのが少し難しいかもしれません。

以下も機能します：

$('#slideDiv').click(
    function(e)
    {
        e.preventDefault();
        var i = -1;
        var divList = $(".slide");
        var animationCallback = function() 
            { 
                if(++i < divList.length)
                    $(divList[i]).slideUp('slow', animationCallback);
                    //Replace 'slideUp' with any other animation of your choice. Make sure to pass 'animationCallback' as the last parameter. 
                    //e.g. you can do
                    //$(divList[i]).animate({ left : '300px'}, 100, 'linear', animationCallback);
            };

        animationCallback();
    }
 );

デモページ→

編集：

デモページを更新しました。別のアニメーションの使用方法に関するコメントを追加しました。