JQuery delay: queue acceleration?

Question

I have a slide show that basically changes the src attribute of the image and fades in it.

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); } 

It works.

I also have something that 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 elements, the slide show should show the corresponding image.

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

The problem is that sometimes it causes listening, and I'm not sure why this is happening. If you press during fadeout (I think) .animate({opacity:0}, 500, startSlideshow) , it will start to move faster.

Does anyone know why this could happen?

Update

In fact, it seems that this happens during the delay, and not during the animation.

Update 2

I could fix it, but it's a bit hacked.

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

Answer 1

The problem is with the delay (), I fixed it by doing:

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

I'm not quite sure what is wrong with the delay, but I found some information here:

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

Hope this helps.

Answer 2

I had an unsuccessful chain of animations. Try using callbacks to sequence multiple animations, so they wait for what ends before.

And instead of using .delay, try using setTimeout.

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