javascript - 循环 jQuery 动画问题？

Question

我已经被困在这个问题上有一段时间了，我真的不明白做我想做的事情的最佳方法。

我有 2 个 Div，(请记住，我可能需要更多)。我只想首先显示 div 1，然后当我按第一个 div 上的箭头时，它会向左滑动，然后出现第二个 div(从右侧滑入)。我将如何做到这一点循环？我以为我可以使用 css3，但是效果不太好。

这是我到目前为止所得到的:enter link description here

这是 jQuery，但它只处理一个箭头:

$('.arrow-right').click(function () {  
    // Slide div to left, and slide new from right ... repeat/Loop
    $("#div1").animate({
        left: "-999%"
    }, 1000, function () {
        $("div1").css("block", "none");
        $("div2").animate({
            // Animate Right Div from right to left ... 
        });
    });
});

我已经从左到右获得了动画，但我只是不明白如何循环此动画(如 slider )并为我拥有的每个 div 单击按钮。

我走在正确的道路上吗？ (我在 jQuery 方面的经验非常薄弱，尤其是在动画方面)

谢谢!

编辑

这与我想要的非常接近，但我需要它循环，并且我希望能够添加内容而不必过多修改 jQuery。 enter link description here

Answer 1

<强> http://jsfiddle.net/jGqLw/9/

设置一个全局变量以在脚本动画时“锁定”脚本。

isAnimating = false;

$('.wrapper').on('click', '.arrow-left', function() {
    // Check if the lock is on, if it is, cancel additional clicks
    if(isAnimating) return;

    // Lock the buttons to avoid multiple user-interaction when script is animating
    isAnimating = true;

    // Get the current displayed div and the next div to be animated in
    var $current = $(this).parents('.MovingDiv');
    var $next = $(this).parents('.MovingDiv').next();

    // Animate the current div out
    $current.animate({
        left: "-999%" // Animate to the left
    }, 1000, function() {
        $current.css({
                // This doesn't really do anything important because the start point will be set again the next time the next time it is needed
                left: "999%"
            })
            .appendTo('.wrapper'); // move to end of stack

        // Animate the next div in
        $next.css({
                left: "999%" // set the start point from the right
            }).animate({
                left: "0%" // complete animation in the middle of the page
            }, 1000, function() {
                isAnimating = false; // unlock the script when done
            });
    });

}).on('click', '.arrow-right', function() {
    if(isAnimating) return;

    isAnimating = true;
    var $current = $(this).parents('.MovingDiv');
    var $next = $(this).parents('.MovingDiv').siblings().last();

    $current.animate({
        left: "999%"
    }, 1000, function() {
        $current.css({
            left: "-999%"
        });

        $next.prependTo('.wrapper') // move to front of stack
            .css({
                left: "-999%"
            }).animate({
                left: "0%"
            }, 1000, function() {
                isAnimating = false;
            });
    });
});

将 CSS 更改为:

.MovingDiv:first-child {
    display: block;
}
.MovingDiv {
    display: none;
}