Question

I know this is a simple one for some of you, so please help me out!
I have 3 panels (divs) which I want to slide one after the other from clicking a button. Sliding one panel is easy but how to slide multiple divs in order?
Thanks.

Answer 1

Even though I really like Kane’s solution, you may find it little hard to understand if you don’t know ‘anonymous functions’ and arguments.callee features of JavaScript language.

Following also works:

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

Updated demo page. Added comment about how to use different animation.