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 ... 
        });
    });
});

我从左到右得到动画，但我只是不明白如何循环播放这个动画（如滑块）并为每个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;
}

Answer 2

这将支持任何内容。

小提琴：http://jsfiddle.net/SinisterSystems/jGqLw/5/

你在正确的轨道上。我会尝试设置一些global variables widths以及您需要实际需要它的功能，而不是像您在示例中所使用的那样使用percentages。< / p>

以下是标准方法的概念：

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

循环jQuery动画问题？

2 个答案:

这将支持任何内容。

小提琴：http://jsfiddle.net/SinisterSystems/jGqLw/5/