Div, проходящий через fade in/fade out, начинает мигать круто

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

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

Answer 2

Возможно, вам необходимо удалить этот тайм-аут 0 мс и/или скрыть элементы через CSS вместо вызова .hide. Таким образом, они скрыты по умолчанию при загрузке страницы.

CSS:

div.my-divs { 
    display: none; 
}