Question

您好我正在尝试使用slideUp移动div。向上滑动只发生一次，但我想不断重复这个过程。下面是我的代码。如果有人帮助我，我很感激。

function slidUp() {
    var delayMe = 0;
    $("#carousel div").siblings().each(function () {
        delayMe += 8000;
        $(this).delay(delayMe).slideUp(2000, "linear");
        $(this).find("#carousel div:last").after($(this).find("#carousel div:first"));
    }

    });
}

var run = setInterval(slidUp());

HTML：

<section id="carousel">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

#carousel {
    height:300px;
}
#carousel div {
    width:500px;
    border:1px solid #ccc;
    height:300px;
    position:relative;
}
#carousel div:first-child {
    background-color:#e01783;
}
#carousel div:nth-child(2) {
    background-color:#ff4e00;
}
#carousel div:nth-child(3) {
    background-color:#ffd141;
}
#carousel div:nth-child(4) {
    background-color:#6dcb99;
}
#carousel div:last-child {
    background-color:#e2b87f;
}

Answer 1

你忘了设定间隔时间。

var time = 10000; // time in ms
var run = setInterval(slidUp(), time)

此外，您需要slideDown()您的div，以便动画有机会重新出现。

function slidUp() {
    var delayMe = 0;
    $("#carousel div").siblings().each(function () {
        delayMe += 8000;
        $(this).delay(delayMe).slideUp(2000, "linear");
        $(this).find("#carousel div:last").after($(this).find("#carousel div:first"));
        $(this).slideDown(2000, "linear");
    });
}

Answer 2

好吧，好吧......对于你的目标是什么样的行为有点不清楚，但无论如何我都会尝试提供帮助。 Michal是对的，你的脚本不会导致<div>元素在向上滑动后向下滑动 - 我认为这就是你希望我们为你解决的问题。

您需要使用setInterval()，这需要一个时间间隔作为参数。此外，代码中的额外大括号会导致它无法正常工作 - 我对您提供非功能代码的原因感到有点困惑，因为您的问题似乎表明它有效。

无论如何，这是一个经过修改的脚本，允许连续上下滑动：

var slideTime = 2000;
var delayTime = 8000;

function slidUp() {
    var delayMe = 0;
    $("#carousel div").each(function () {
        delayMe += delayTime;
        $(this).delay(delayMe).slideUp(slideTime, "linear");
    });

    $("#carousel div").each(function () {
        $(this).delay(delayMe).slideDown(slideTime, "linear");
    });
}

slidUp();

var run = setInterval(slidUp, delayTime * 2 * 6);

我将值放入变量中，使它们更容易快速更改。对脚本的添加基本上会对所有元素的延迟slideDown()进行处理。第一次调用slidUp()只是为了让它开始;后续调用由setInterval()执行。这是一个JSFiddle，可以向您展示代码的实际效果。请注意，我将延迟时间减少到3000，否则需要一段时间才能看到它反转。

或者，如果您希望<div>元素只是向右跳回到位而不是滑动，您可以使用此脚本：

var slideTime = 2000;
var delayTime = 8000;

function slidUp() {
    $("#carousel div").height(300).show();
    var delayMe = 0;
    $("#carousel div").each(function () {
        delayMe += delayTime;
        $(this).delay(delayMe).slideUp(slideTime, "linear");
    });
}

slidUp();

var run = setInterval(slidUp, delayTime * 6);

如果您有任何疑问，请与我联系！

JQUERY只滑动一次slideUp但需要连续滑动

2 个答案: