Question

我有一系列div在一个循环中淡入淡出。它开始后它可以顺利运行，但是当页面首次加载时，突然显示的第一个div＆＃34;闪烁＆＃34;一次，在进入平滑淡入/淡出循环之前。实例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超时和/或通过CSS隐藏元素而不是调用.hide。这样，默认情况下它们会在页面加载时隐藏。

CSS：

div.my-divs {
  display: none;
}

Answer 2

setTimeout对于第一组div是必需的，因为它是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经过淡入/淡出周期突然眨眼

2 个答案: