jquery - jQuery：一个接一个地滑动面板

Question

我知道这对你们中的一些人来说很简单，所以请帮助我！我有 3 个面板（div），我想通过单击按钮一个接一个地滑动它们。滑动一个面板很容易，但是如何按顺序滑动多个 div？谢谢。

Answer 1

给 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)
    })();
});

演示页面 →

代码

Answer 2

尽管我非常喜欢Kane 的解决方案，但如果您不了解 JavaScript 语言的“匿名函数”和 arguments.callee 特性，您可能会发现有点难以理解。

以下也有效：

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

演示页面 →

编辑：

更新了演示页面。添加了关于如何使用不同动画的评论。