Div going through fade in/fade out cycle blinks abruptly

Question

I have a series of divs that fade in and out in a cycle. After it gets going it works smoothly, but when the page is first loaded, the first div that is displayed abruptly "blinks" once, before entering the smooth fade in/fade out cycle. Live example 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>

What could be causing the blinking effect when the page is initially loaded?

Answer 1

The setTimeout isn't necessary for the first group of divs since it's a 0 ms timeout. That's what's causing the blinking.

Also, you should wrap your setTimeout around the (function, rather than the var divs instantiation. This could unnecessary cause latency.

I created a JSFiddle: https://jsfiddle.net/richardgirges/noq2f5ox/2/

JS Code:

  $(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);
  });

Answer 2

You probably need to remove that 0ms timeout and/or hide the elements via CSS instead of a call to .hide. That way they are hidden by default on page load.

CSS:

div.my-divs {
  display: none;
}