Question

我需要显示/隐藏两个元素但具有不同的延迟。我正在使用这个脚本很好地循环元素，但具有相同的延迟。如何为每个元素指定延迟，以使#block1保持可见，例如5秒，并且#block2保持可见10秒钟？

代码。

  var longIntervalTime = 5000;

  // I need the two boxes to have different delays instead 
  // of the longIntervalTime - maybe something like this?:

  var delays = [5000, 10000];

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

JSFiddle

Answer 1

不是使用具有延迟的单独数组，而是将它们与块本身耦合可能更好。例如通过创建包含块（id）和间隔的对象数组。或者通过在元素上设置data- ..属性，逻辑可以保存在html中。

或者使用另一种方法，通过调用函数（如果其他人也使用代码，则可能不是最透明的方法）：

function cycle(...blocks) {
    let i = 0;
  const show = () =>
  $("#" + blocks[i++ % blocks.length] )
    .fadeIn(400)
    .delay(blocks[i++ % blocks.length])
    .fadeOut(400, show);
   show();
}
cycle("block1", 5000, "block2", 10000);

这种方法的优点是可以非常轻松地添加新块而无需担心＆＃39; nextID＆＃39;

Fiddle

＆＃13;

function cycle(...blocks) {
	let i = 0;
  const show = () =>
  $("#" + blocks[i++ % blocks.length] )
    .fadeIn(400)
    .delay(blocks[i++ % blocks.length])
    .fadeOut(400, show);
   show();
}
cycle("block1", 5000, "block2", 10000);

＆＃13;

    #block1,
    #block2 {
      display: none;
      height: 100px;
      width: 100px;
      text-align: center;
      color: #fff;
    }
    
    #block1 {
      background-color: blue;
    }
    
    #block2 {
      background-color: red;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">1</div>
<div id="block2">2</div>

＆＃13;

同样可以通过使用对象作为参数来完成：

function cycle(info) {
    let i = 0,
       blocks = Object.keys(info);
  const show = () =>
  $("#" + blocks[i % blocks.length])
    .fadeIn(400)
    .delay(info[blocks[i++ % blocks.length]])
    .fadeOut(400, show);
   show();
}

cycle({
  block1: 5000,
  block2: 10000
});

Answer 2

尝试使用延迟数组中的索引值，例如

function cycle(id) {
   var nextId = (id == "block1") ? "block2" : "block1";
   var del= (id == "block1") ? delays[0] : delays[1]; // block 1 then 5000 or 10000
   $("#" + id)
      .fadeIn(400)
      .delay(del) // use del here instead of static longIntervalTime
      .fadeOut(400, function() {
         cycle(nextId);
      });
}

<强>代码段，

var delays = [5000, 10000];

function cycle(id) {
  var nextId = (id == "block1") ? "block2" : "block1";
  var del = (id == "block1") ? delays[0] : delays[1]; // block 1 then 5000 or 10000
  $("#" + id)
    .fadeIn(400)
    .delay(del) // use del here instead of static longIntervalTime
    .fadeOut(400, function() {
      cycle(nextId);
    });
}
cycle("block1", 0);

#block1,
#block2 {
  display: none;
  height: 100px;
  width: 100px;
  text-align: center;
  color: #fff;
}

#block1 {
  background-color: blue;
}

#block2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">1</div>
<div id="block2">2</div>

Answer 3

定义一个包含id和delay关系的对象，并根据该更新延迟。

// object which holds the delay
var delays = {
  block1: 5000,
  block2: 10000
};

function cycle(id) {
  var nextId = (id == "block1") ? "block2" : "block1";
  $("#" + id)
    .fadeIn(400)
    // set delay based on the id
    .delay(delays[id])
    .fadeOut(400, function() {
      cycle(nextId);
    });
}
cycle("block1", 0);

// object which holds the delay
var delays = {
  block1: 5000,
  block2: 10000
};

function cycle(id) {
  var nextId = (id == "block1") ? "block2" : "block1";
  $("#" + id)
    .fadeIn(400)
    // set delay based on the id
    .delay(delays[id])
    .fadeOut(400, function() {
      cycle(nextId);
    });
}
cycle("block1", 0);

#block1,
#block2 {
  display: none;
  height: 100px;
  width: 100px;
  text-align: center;
  color: #fff;
}

#block1 {
  background-color: blue;
}

#block2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">1</div>
<div id="block2">2</div>

Answer 4

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

jQuery：显示/隐藏具有不同延迟的无限循环

4 个答案: