title: Progress bar delay jQuery
body: <p>I have a simple slider with a progress bar, and is working fine, but during the transition for the next slider, the progress starts immediately, not taking into consideration the transition time. I am trying to add a <code>fadeOut</code> and <code>fadeIn</code> effect but it's not working properly.</p>
  <p>Could you please have a look at this <a href="http://jsfiddle.net/np8oh613/" rel="nofollow noreferrer">fiddle</a>?</p>
  <h1>JavaScript</h1>
  <pre><code>bar = $('.progress_bar');
  time = 3000;
  
  function run() {
    bar.width(0);
    bar.animate({
      'width': &quot;100%&quot;
    }, time, run).fadeOut(500).fadeIn(500);
  }
  
  $(&quot;#slideshow &gt; li:gt(0)&quot;).hide();
  //bar.stop(true, true).css(&quot;width&quot;, 0).animate({'width': &quot;100%&quot;}, time, run);
  
  setInterval(function () {
    $('#slideshow &gt; li:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo('#slideshow');
  }, time);
  
  run();
  </code></pre>