title: jquery fadeout and fadein how to not flashing
body: <p>i have that jquery code</p>
  
  <pre><code>$(function(){
  $('.efectfade img:gt(0)').hide("");
  setInterval(function(){$('.efectfade &gt; :first-
  child').fadeOut().next('img').fadeIn().end().appendTo('.efectfade');}, 
  5000);
  });
  </code></pre>
  
  <p>css </p>
  
  <pre><code> .efectfade {background-size: cover;
      background-position:center;
    background-repeat: no-repeat;
  overflow: hidden;
   width: 100%;
   z-index: -1;
   opacity:0.8;
     height: 100%;}
  </code></pre>
  
  <p>and html</p>
  
  <pre><code>&lt;div class="efectfade"&gt;
  
         &lt;img src="http://cdn.akamai.steamstatic.com/steam/apps/304390/ss_f49a29395ae871
                76ee986dc16eddf9c4a3285231.1920x1080.jpg?t=1511961587"&gt;
  &lt;img src="
   https://fsmedia.imgix.net/95/59/72/bf/16f7/467c/9232/c85b40a56d06/the
           -brutal-centurion-one-of-the-two-new-heroes-playable-in-
      shadow--might.jpeg"&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>and here is jsfiddle <a href="https://jsfiddle.net/rypz99/pyxjhfbv/" rel="nofollow noreferrer">https://jsfiddle.net/rypz99/pyxjhfbv/</a> 
  my question how to not flashing when changing image</p>