Javascript 使用jQuery的幻灯片动画只能在一个方向上工作

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

<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>

我得到的结果是，只有一个移动函数使用animate（moveRight）滑动。我不明白为什么它不能用moveLeft函数来设置动画。

将

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

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

和

moveLeft（）

移动到

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

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

这至少可以达到你的视觉效果。如果您没有足够的元素，无法用右侧缺少的元素填充容器，则需要克隆

---

检查是否有任何元素已设置动画将防止由同一元素制作多个克隆。

负责向右移动按钮操作的

moveLeft

功能也存在问题，该功能会不时导致问题，因为在制作动画之前要删除

第一个子元素
。这会导致它跳过一个元素，从而将第一个元素移到最后一个，然后向左滑动（跳过了两个元素）。哈，
.clone（）
也是我的第一个猜测！干得好！这太完美了。我需要回顾一下，确切地了解你在这里做什么，以及为什么它能工作，但我插上了电源，它工作得非常好。谢谢