javascript - 经历淡入/淡出循环的 Div 突然闪烁

Question

我有一系列循环淡入淡出的 div。启动后，它可以顺利工作，但是当页面首次加载时，显示的第一个 div 突然“闪烁”一次，然后进入平滑的淡入/淡出循环。实例here .

html

<div id="rotate-1-1">
  <!--...-->
</div>
<div id="rotate-1-2">
  <!--...-->
</div>
<div id="rotate-2-1">
  <!--...-->
</div>
<div id="rotate-2-2">
  <!--...-->
</div>
<div id="rotate-3-1">
  <!--...-->
</div>
<div id="rotate-3-1">
  <!--...-->
</div>

jquery

<script type="text/javascript">
  $(document).ready(function() {
      setTimeout(function() {
        var divs = $('div[id^="rotate-1-"]').hide(),
            i = 0;

        (function cycle() { 

            divs.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs.length;

        })();
      }, 0);
  });

  $(document).ready(function() {
      setTimeout(function() {
        var divs2 = $('div[id^="rotate-2-"]').hide(),
            i = 0;

        (function cycle() { 

            divs2.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs2.length;

        })();
      }, 100);
  });

  $(document).ready(function() {
      setTimeout(function() {
        var divs3 = $('div[id^="rotate-3-"]').hide(),
            i = 0;

        (function cycle() { 

            divs3.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs3.length;

        })();
      }, 200);
  });
</script>

什么可能导致页面首次加载时闪烁效果？

Answer 1

第一组 div 不需要 setTimeout，因为它是 0 毫秒 超时。这就是导致眨眼的原因。

此外，您应该将 setTimeout 包裹在 (function 周围，而不是 var divs 实例化。这可能会造成不必要的延迟。

我创建了一个 JSFiddle: https://jsfiddle.net/richardgirges/noq2f5ox/2/

JS 代码:

  $(document).ready(function() {
        var divs = $('div[id^="rotate-1-"]').hide(),
            i = 0;

        (function cycle() { 

            divs.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs.length;

        })();
  });

  $(document).ready(function() {
        var divs2 = $('div[id^="rotate-2-"]').hide(),
            i = 0;

      setTimeout(function() {
        (function cycle() { 

            divs2.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs2.length;

        })();
      }, 100);
  });

  $(document).ready(function() {
        var divs3 = $('div[id^="rotate-3-"]').hide(),
            i = 0;

      setTimeout(function() {
        (function cycle() { 

            divs3.eq(i).fadeIn(800)
                      .delay(3700)
                      .fadeOut(500, cycle);

            i = ++i % divs3.length;

        })();
      }, 200);
  });