jQuery: Schiebepaneele nacheinander

Question

Ich weiß, dass dies für einige von euch einfach ist, also bitte hilf mir! Ich habe 3 Panels (divs), die ich nacheinander von einem Klick auf eine Schaltfläche schieben möchte. Ein Panel zu schieben ist einfach, aber wie werden mehrere Divs nacheinander verschoben? Danke.

Answer 1

Obwohl ich wirklich wie Kane's solution, können Sie es etwas schwer zu verstehen, wenn Sie nicht wissen, ‚anonyme Funktionen‘ und arguments.callee Funktionen von JavaScript-Sprache .

Nach funktioniert auch:

$('#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:

aktualisiert Demo-Seite. Kommentar zur Verwendung verschiedener Animationen hinzugefügt

Answer 2

Geben Sie den 3 Divs eine Klasse ".slide_panel", diese wird durch sie durchlaufen und die Animation darauf ausführen.

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