jQuery delay: Speeding up queue?
<p>I have a slideshow which basically changes the src attribute of an image and fading it in and out.</p>

<pre><code>function startSlideshow() {
    if (i &gt;= images.length) { i = 0 }

    var path = images[i].path;
    var name = images[i].name;
    i++;

    image.attr('src', path)

    image.animate({opacity:1}, 1000)
         .delay(5000)
         .animate({opacity:0}, 500, startSlideshow);
}
</code></pre>

<p>This works. </p>

<p>I also have something I call an image picker. It looks something like this:</p>

<pre><code>&lt;ul id="ImagePicker"&gt;
    &lt;li&gt;•&lt;/li&gt;
    &lt;li&gt;•&lt;/li&gt;
    &lt;li&gt;•&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When you click on one of the li items the slideshow should show the corresponding image.</p>

<pre><code>$('#ImagePicker li').click(function () {       
    image.stop(true, false)
         .animate({ opacity: 0 }, 10, startSlideshow);
});
</code></pre>

<p>The problem is that it sometimes gets bugging and I am not sure why it happens. If you click during the fadeout(I think) <code>.animate({opacity:0}, 500, startSlideshow)</code> it starts going faster.</p>

<p>Anybody know why this might happen?</p>

<p><strong>Update</strong></p>

<p>Actually it seems that it's happening during delay and not during the animate.</p>

<p><strong>Update 2</strong></p>

<p>I could fix it like this but it feels a little hacky:</p>

<pre><code>image.animate({ opacity: 1 }, 1000)
     .animate({ opacity: 1 }, 5000)
     .animate({opacity:0}, 1000, startSlideshow);
</code></pre>
