jQuery: раздвижные панели один за другим

Question

Я знаю, что это просто для некоторых из вас, поэтому, пожалуйста, помогите мне! У меня есть 3 панели (div), которые я хочу сдвинуть один за другим, нажав кнопку. Раздвинуть одну панель легко, но как сместить несколько разделов по порядку? Спасибо.

Answer 1

Даже если мне очень нравится Kane's solution, вы можете найти его немного трудно понять, если вы не знаете, «анонимные функции» и особенности arguments.callee из JavaScript языка ,

После работы также:

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

Обновлено демонстрационной страницы. Добавлен комментарий о том, как использовать другую анимацию.

Answer 2

Дайте 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