title: jQuery img src change not immediate
body: <p>I use jQuery in a simple image gallery. Images fadeOut, the src changes, and they fadeIn.</p>
  
  <p>Frequently, the previous image is faded in; only once the element reaches full opacity is the new image displayed.</p>
  
  <p>What could be causing the delay and subsequent jump to the new image?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="slide"&gt;
      &lt;img src="/img/products/image1.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var index = 0;
  
  $(function() {
      if (srcs.length &gt; 1) {
          setInterval("slide(800, 800)", 6000);
      }
  });
  
  function slide(o,i) {
      index++;
      if (index == srcs.length) index = 0;
      $("#slide img").fadeOut(o, function() {
          $(this).attr("src", path + srcs[index] + ext);
          $(this).fadeIn(i);
      });
  }
  </code></pre>
  
  <p><strong>Edit:</strong> I put <code>fadeIn()</code> in <code>fadeOut()</code>'s callback, but now the problem occurs noticeably <em>every</em> time. The image fades out all the way, then fades all the way back in, <em>then</em> changes.</p>
  
  <p><strong>Solution:</strong> in <a href="https://stackoverflow.com/a/2435485/2231440">this answer</a>, the <code>.each()</code> function caused a slight flicker during the new image's <code>fadeIn()</code>, but removing the <code>.each()</code> portion entirely fixed this.</p>