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

Question

如果有人可以帮助我，我想在我的一个页面上找到这个js进程：

  

  
• 延迟60秒;
  
• 显示我的div 1持续20秒;
  
• 延迟60秒;
  
• 显示我的div 2 20秒;
  
• 延迟60秒;
  
• 显示我的div 1持续20秒;
  
• 延迟60秒;
  
• 显示我的div 2 20秒;
  
  
  
• 永远继续...
  

我尝试使用this solution！我在'StockOverFlow'找到但我没有正常工作。

谢谢

Answer 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/。