使用 setInterval（无限循环）显示和隐藏 div（有一些延迟）答案

【问题标题】：Show and Hide divs (with some delay) using setInterval (infinite loop)使用 setInterval（无限循环）显示和隐藏 div（有一些延迟）
【发布时间】：2011-10-23 22:58:34
【问题描述】：

如果有人可以帮助我，我希望这个 js 进程出现在我的一个页面上：

延迟 60 秒；

显示我的 div 1 20 秒；

延迟 60 秒；

显示我的 div 2 20 秒；

延迟 60 秒；

显示我的 div 1 20 秒；

延迟 60 秒；

显示我的 div 2 20 秒；

.

.

永远继续...

我尝试使用this solution！我在 'StockOverFlow' 找到的，但对我来说不能正常工作。

谢谢

【问题讨论】：

实际上，如果您将5000 替换为20000 并将counter == 3 替换为counter == 2，该解决方案应该会很有效。究竟是什么不工作？
问题是我希望在 Div 1 和 Div 2 之间有一些延迟。

标签： javascript jquery html setinterval show-hide

【解决方案1】：

这里有一些代码可以做到这一点：

HTML：

<div id="block1"></div>
<div id="block2"></div>

Javascript：

var shortIntervalTime = 2 * 1000;
var longIntervalTime = 5 * 1000;

function cycle(id) {
    var nextId = (id == "block1") ? "block2": "block1";
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function() {cycle(nextId)});
}

cycle("block1");

您可以将间隔时间设置为您想要的任何时间 - 我在此处将它们设置为短以用于演示目的。这使用了一系列 jQuery 效果，然后在给定对象上的最后一个效果完成后，它会在另一个对象上重新开始循环并永远重复。

你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/LTRzV/。

【讨论】：

感谢 'jfriend00' 的快速回复。最近几天我很忙，所以今天运行了代码并看到了演示。我唯一想知道的是，为什么在运行“longIntervalTime”时需要多花 2 秒才能隐藏，如果它设置为 7500，那么它会在 9500 处消失。您可以在演示中注意到它。请原谅我的英语不好。
时间是累积的。在演示中，它是 2.5 秒延迟、0.5 秒淡入、7.5 秒延迟、0.5 秒淡出。
o' 嗯！还有1个问题，演示中的计时器从0开始，是否有可能让它反方向（如7.5到0）？