jQuery: pannelli scorrevoli uno dopo l'altro

Question

So che questo è un semplice per alcuni di voi, quindi per favore help me out! Ho 3 pannelli (div), che voglio far scorrere uno dopo l'altro dal clic su un pulsante. Scorrevole un pannello è facile, ma come far scorrere più div in ordine? Grazie.

Answer 1

Anche se mi piace molto la soluzione di Kane , si possono trovare po 'difficile da capire se non si sa '' funzioni anonime e le caratteristiche arguments.callee del linguaggio JavaScript.

seguenti interventi anche:

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

Pagina demo →

Modifica

Aggiornamento pagina di dimostrazione. Commento aggiunto su come utilizzare l'animazione diversa.

Answer 2

Dare i 3 div di una classe ".slide_panel" questo ciclo volontà attraverso di loro e di eseguire l'animazione su di loro.

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

Pagina demo →

Codice