jQuery delay: Speeding up queue?

Question

Hello,

I have a slideshow which basically changes the src attribute of an image and fading it in and out.

function startSlideshow() {
    if (i >= 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);
}

This works.

I also have something I call an image picker. It looks something like this:

<ul id="ImagePicker">
    <li>•</li>
    <li>•</li>
    <li>•</li>
</ul>

When you click on one of the li items the slideshow should show the corresponding image.

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

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

Anybody know why this might happen?

Update

Actually it seems that it's happening during delay and not during the animate.

Update 2

I could fix it like this but it feels a little hacky:

image.animate({ opacity: 1 }, 1000)
     .animate({ opacity: 1 }, 5000)
     .animate({opacity:0}, 1000, startSlideshow);

Answer 1

I've had bad luck chaining animations like that. Try using callbacks to sequence multiple animations, this way they wait for the one before to finish.

And instead of using .delay, try using setTimeout.

image.animate({opacity:1}, 1000, function(){
    setTimeout(image.animate({opacity:0}, 500, startSlideshow), 5000);
});

Answer 2

The problem is related to delay() I fixed this by doing:

image.animate({ opacity: 1 }, 1000)
     .animate({ opacity: 1 }, 5000)
     .animate({opacity:0}, 1000, startSlideshow);

I ain't exactly sure what is wrong with delay but I found some information here:

http://api.jquery.com/delay/
http://dev.jquery.com/ticket/6576

Hope it helps.