如何在 JQuery 中循环 each() 3 次答案

【问题标题】：How to loop each() 3 times in JQuery如何在 JQuery 中循环 each() 3 次
【发布时间】：2016-09-20 08:00:42
【问题描述】：

我正在制作一个 HTML5 横幅，需要遍历 3 个重叠的横幅。

我目前使用的脚本是这样的：

var currentDelay; currentDelay = 0;
var pastItem; pastItem = "";

$( ".state" ).each(function() {
    $(this).delay(currentDelay).fadeIn();
    $(this).prev().delay(3000).fadeOut();
    currentDelay += 3000;
});

它有效，但只有效一次。 .state 是每个横幅的包装类。它们相互重叠放置，应相互淡入淡出。

HTML：

        <div class="state">
            <img src="images/img-1.jpg" alt="Last minute ski holidays from £299pp" />
            <div class="message"><p>Last minute<br />ski holidays from £299<span>pp</span></p></div>
        </div>
        <div class="state">
            <img src="images/img-2.jpg" alt="Enjoy free skiing guide & coaching" />
            <div class="message blue"><p>Enjoy free<br />skiing guide<br />&amp; coaching</p></div>
        </div>
        <div class="state">
            <img src="images/img-3.jpg" alt="Last minute ski holidays from £299pp" />
            <div class="message grey"><p>Limited availability<br /><span class="sub-mes">Don't miss out</span></p></div>
            <p class="call-to-action">Find out more</p>
        </div>

有没有办法让它循环 3 次然后停在最后一帧？最后一个横幅需要淡出到第一帧，以便看起来无缝。

非常感谢您对此的帮助:)

干杯

罗伯

【问题讨论】：

使用 setInterval 代替 each 和 delay。在达到所需的循环量后增加一个变量并清除间隔。
嗨......这就是我最初正在做的事情，但阅读它不是正确的方法吗？
为什么不是“正确的方式”？只要将 setInterval 存储在变量中并在完成后将其清除，就可以了。
不确定...只是我读到的内容...在我做这件事时似乎是最合乎逻辑的方式...谢谢
没问题。如果您有该文章的链接（关于设置间隔），我想阅读它。 setInterval 最大的问题是内存泄漏，只要小心你在间隔回调中创建的变量，记得在完成后清除它。

标签： javascript jquery html each

【解决方案1】：

这是一个使用setInterval的方法。

我已经注释了代码，所以我不会费心解释它。

JS：

$(document).ready(function() {
    var currentDelay; currentDelay = 3000;
    var pastItem; pastItem = "";

    var i=0;

  // interval
  var cycle = setInterval(function() {
      // Fade
      $(".state:eq(" + i + ")").fadeOut();
      // Increment
      i++;
      // Increase delay
      currentDelay+=3000;
      // Check if at last, change to suit wants
      if(i == $(".state").length) {
          /*
          // Loop here
          $(".state").delay(500).fadeIn();
          i=0;
          */
          // Stop interval
          clearInterval(cycle); // Comment this line if looping
      }
   }, currentDelay);

})

小提琴：https：https://jsfiddle.net/4bhv9w80/1/

【讨论】：

【解决方案2】：

您可以通过调用自身 3 次的自引用函数来执行此操作。

var sleepTimer = 0;

(function LoopyLoo(i) {


  setTimeout(function() {
    var currentDelay = 0
    $(".state").fadeOut();

    $(".state").each(function() {
      $(this).delay(currentDelay).fadeIn();
      currentDelay += 3000;
    });

    if (--i) {
        LoopyLoo(i);
      }//  decrement i and call myLoop again if i > 0
  }, sleepTimer)

  sleepTimer = 9000;

})(3); //Times to call the function.

对 css 的小改动，添加了一些可爱的颜色，以便您可以看到它的实际效果。

.state-con {
  position: relative;
}

.state {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.one {
  z-index: 1;
  background-color: red;
}

.two {
  z-index: 2;
  background-color: blue;
}

.three {
  z-index: 3;
  background-color: aqua;
}

看看这一切都与这个 JS fiddle 一起工作。 https://jsfiddle.net/yojmu6ga/21/

【讨论】：

【解决方案3】：

希望这对你有用：

var currentDelay; currentDelay = 0;

$( ".state" ).each(function() {
   var $currentElement =$(this);

   window.setTimeout(function(){
       $( ".state:visible" ).fadeOut();
       $currentElement.fadeIn();
   }, currentDelay);

  currentDelay += 3000    
});

window.setTimeout(function(){
   $( ".state:visible" ).fadeOut();
   $(".state:first").fadeIn();
}, currentDelay);

https://jsfiddle.net/2k6c1b18/

【讨论】：