Jquery Fadein Fadeout With Setinterval Working Sporadically

I have a bunch of images that need to rotate in and out one at a time every 2 seconds with fancy JQuery fadeIn and fadeOut. I have all the images in the HTML to pre-load them and

Solution 1:

Have you thought about using the Cycle Plugin? It sounds like this does exactly what you're trying to do, and it offers a lot of flexibility. I've used this plugin myself with great results. Highly recommended.

Solution 2:

Just off the top of my head ... why are you doing the currentImage bookkeeping in the callback functions? It seems to me this is easier, and might even have something to do with your problem:

functionchangeImage()
{
    $("#img" + currentImage).fadeOut("slow");
    currentImage = (currentImage >= numImages) ? 1 : currentImage + 1;
    $("#img" + currentImage).fadeIn("slow");
}

Solution 3:

You have id="img2" twice.

Can you not simpify - calculate the current and next id first. Then do your $().fadeOut() and on the next line $().fadeIn() and avoid all of the function complexity.

Solution 4:

Your problem is that if you click on img2 before it's finished fading in, currentImage is still thinking you're looking after the transition between img1 and img2, but in reality img2 is now live and you're waiting on img3.

I think that Jim's solution should see you OK.

As a freebee, consider adding this too to allow you to add more images without having to edit the script:

numImages = $("a > img").size();

Solution 5:

also

setInterval (function () {
    $("img:eq(0)").fadeOut ("slow").next ("img").fadeIn ("slow");
}, 2000);