Question

我有一组块元素，我点击了附加幻灯片动画。目标是元素继续平滑地来回滑动。

<section class="stretch">
    <div class="block blue"></div><div class="block red"></div><div class="block green"></div><div class="block orange"></div><div class="block silver"></div><div class="block teal"></div><div class="block salmon"></div>
</section>
<button class="button-left">Left</button>
<button class="button-right">Right</button>

和jQuery：

function moveRight() {
        var lastBlock = $(".stretch .block:last-child");
        lastBlock.remove();
        $(".stretch .block:first-child").before(lastBlock);
        $(".stretch .block").each(function(){
            $(this).css("left","0").css("right","0");
            $(this).animate({"left": "+=250px"}, "5000");
        });
    };

    function moveLeft() {
        var firstBlock = $(".stretch .block:first-child");
        firstBlock.remove();
        $(".stretch .block:last-child").after(firstBlock);
        $(".stretch .block").each(function(){
            $(this).css("right","0").css("left","0");
            $(this).animate({"right": "+=250px"}, "5000");
        });
    };
$(".button-right").click(function(){
        moveLeft();
    });

    $(".button-left").click(function(){
        moveRight();
    });

我得到的结果只是其中一个移动函数与animate一起滑动（moveRight）。我无法理解为什么它不会使用moveLeft函数进行动画处理。

Answer 1

Fiddle

将moveRight()更改为

function moveRight() {
    if ($('.stretch .block:animated').length == 0) {
        var lastBlock = $(".stretch .block:last-child");
        var cloned = lastBlock.clone()
        cloned.width(1);
        $(".stretch .block:first-child").before(cloned);
        cloned.animate({
            'width': "250"
        }, "5000", function () {
            lastBlock.remove()
        });
    }
};

moveLeft()到

function moveLeft() {
    if ($('.stretch .block:animated').length == 0) {
        var firstBlock = $(".stretch .block:first-child");
        var cloned = firstBlock.clone()
        cloned.width(250);
        $(".stretch .block:last-child").after(cloned);
        firstBlock.animate({
            'width': "0"
        }, "5000", function () {
            firstBlock.remove()
        });
    }
};

至少可以实现您的视觉效果。如果你没有足够的元素来填充容器，而右边有一个缺失，那么克隆是必要的。

检查是否有任何元素被动画化将阻止多个克隆由相同的元素组成。

使用jQuery进行幻灯片动画只能在一个方向上运行

1 个答案: