2009-07-23 15 views
1

これはあなたの中にはシンプルなものなので、私を助けてください! 私は3つのパネル(divs)を持っています。 1つのパネルをスライドさせるのは簡単ですが、複数のdivを順番にスライドさせる方法はありますか?おかげさまで jQuery:1つ後ろのスライドパネル

+0

実際の例を示すには、いくつかのコードが必要です。 – Sneakyness

答えて

1

あなたは「匿名関数」とJavaScript言語のarguments.calleeの機能を知っていない場合、私は本当にKane's solutionのように、あなたは理解することは少し難しいかもしれないにもかかわらず、 。

後も動作します:

$('#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(); 
    } 
); 

Demo Page →

EDIT:

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

+0

皆さんは素晴らしいです。 30分、すでに何が行われているかを見てください! Anyhoo、あなたは正しいですが、私は匿名関数などを理解していません。しかし、あなたのコードを見ると、リストの長さによって次のdivのアニメーションを開始するタイミングが決まると思いますか? divを右から左に横方向にスライドさせたい場合はどうすればよいですか? – lnvrt

+0

リストの長さによって、別のアニメーションをシーケンスする必要があるかどうかが決まります。例えば。上記のコードは、 'slide'クラスで4番目のdivを追加すると機能します。 3番目のアニメーションが終了した後、4番目のdivをアニメートします。別のアニメーションが必要な場合は、関連する方法で 'slideUp'メソッドを変更してください。方法を示すコードを編集してみましょう。 – SolutionYogi

+0

http://jsbin.com/adaca/editにCSSを少し追加しました。//少し明確になりました... – lnvrt

8

3つのdivのクラスに ".slide_panel"を渡します。これにより、それらをループしてアニメーションを実行します。

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

Demo Page →

Code

+0

+100、arguments.calleeの優れた使用!ここに作業デモページがあります。 http://jsbin.com/utebe私はこれがDIVをどのように構造化すべきかを著者が理解するのに役立つと思った。 – SolutionYogi

+0

デモページへのリンクを追加するためにあなたの投稿を編集しました。 – SolutionYogi

+0

私はif条件を少し違って書きます。 if(++ i SolutionYogi

関連する問題