Question

我的setInterval代码第一次工作正常，但它没有正确重复 - 在第一次没有延迟第一个和第二个实例之间。这是我的代码还是setInterval的问题？

    setInterval(function() {

        $('#img2').fadeIn(500).delay(5000).fadeOut(500);

    }, 5000);

为了澄清（如果我的代码真的很笨拙！）我希望我的img在5秒后淡入，在那里停留5秒，然后淡出 - 5秒后淡入，保持5秒，淡出;重复。

编辑：为了进一步澄清，我想我需要问：在设置间隔时，有没有办法在函数中计算延迟？现在我的间隔与我在函数内的延迟同时发生，并且它导致间隔之间的时间为0.

全部谢谢！

Answer 1

setInterval()只是在重复的时间表上启动该功能，它不会根据每个人所花费的时间重复。使用setTimeout在每个结束后的固定时间内安排重启。

function delay_and_fade() {
    setTimeout(function() {
        $('#img2').fadeIn(500).delay(5000).fadeOut(500);
        delay_and_fade();
    }, 5000);
}

delay_and_fade();

Answer 2

尝试使用它。

setInterval(function() {
$('#img2').fadeIn(500);
$('#img2').delay(5000);
$('#img2').fadeOut(500);
}, 5000);

Answer 3

Demo

setInterval(function() {
  $('img').fadeIn(500).delay(500).fadeOut(500);
}, 500);

Answer 4

感谢您的回复！我能够通过将我的代码改为此来修复它：

    setInterval(function() {

        $('#img2').fadeIn(500).delay(5000).fadeOut(500).delay(5000);

    }, 5000);

通过在我的淡出后添加延迟，它在每个间隔之间保持5秒，并且在开始时有5秒的延迟！正是我想要的： - ）

Answer 5

这里有两个不同的问题。

您希望在5秒延迟后启动淡入/淡出动画。
您希望动画在完成后5秒重新启动。

让动画每5秒重复一次：

function fadeAnimation() {
    $('#img2').fadeIn(500).delay(5000).fadeOut(500);
    // this executes immediately, so add 500+5000+500 (6000) to the time
    // to account for the animation time
    setTimeout(fadeAnimation, 5000 + 6000);
}

将动画设置为在5秒后开始：

setTimeout(fadeAnimation, 5000);

这有意义吗？

setInterval延迟仅在第一次工作

5 个答案: