Div 正在淡入淡出 in/fade out 循环突然闪烁

Question

我有一系列 div 循环淡入淡出。开始后它运行顺利，但是当第一次加载页面时，第一个 div 突然显示 "blinks" 一次，然后进入平滑淡入淡出 in/fade 循环。现场示例 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

您可能需要删除 0ms 超时 and/or 通过 CSS 隐藏元素而不是调用 .hide。这样它们在页面加载时默认隐藏。

CSS:

div.my-divs {
  display: none;
}

Answer 2

第一组 div 不需要 setTimeout，因为它是 0 ms 超时。这就是导致闪烁的原因。

此外，您应该将 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);
  });

Div 正在淡入淡出 in/fade out 循环突然闪烁

Div going through fade in/fade out cycle blinks abruptly

javascript

jquery

fadein

fadeout

document-ready