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 a setInterval timer that fades the current image out, then fades the next image in. Problem is that sometimes when you are clicking or scrolling during the fade in/out process, the JS gets interrupted and the current image never disappears and the next one fades in giving you two images.

I get the feeling it has something to do with setInterval not running properly every 2 seconds, but are there any better ways to acplish what I need?

Here's a snippet of code:

HTML

<a href="javascript:;">
  <img id="img1" src="image1.gif" />
  <img id="img2" src="image2.gif" style="display:none;" />
  <img id="img3" src="image3.gif" style="display:none;" />
</a>

JS

var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow", function() {
        if (currentImage >= numImages)
        {
            currentImage = 0;
        }
        $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
            currentImage++;
        });
    });
}

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 a setInterval timer that fades the current image out, then fades the next image in. Problem is that sometimes when you are clicking or scrolling during the fade in/out process, the JS gets interrupted and the current image never disappears and the next one fades in giving you two images.

I get the feeling it has something to do with setInterval not running properly every 2 seconds, but are there any better ways to acplish what I need?

Here's a snippet of code:

HTML

<a href="javascript:;">
  <img id="img1" src="image1.gif" />
  <img id="img2" src="image2.gif" style="display:none;" />
  <img id="img3" src="image3.gif" style="display:none;" />
</a>

JS

var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow", function() {
        if (currentImage >= numImages)
        {
            currentImage = 0;
        }
        $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
            currentImage++;
        });
    });
}

• javascript
• jquery

7 Answers 7

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 remended.

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:

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

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 plexity.

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

also

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

I'm having a similar problem using a function I based off of snook.ca's simplest jquery slideshow. (see my ment @tom) Although mine happens whether I'm clicking or scrolling or not!

It seems as though after the first run through the cycle the timings get all messed up and start half fading in or out and just jumping in with no fade! I was watching the html panel in firebug and found that the css display attribute wasn't getting set from 'block' back to 'none' properly, eventually resulting in all of the images having display:block set on them reglardless of their supposed fade state.

I did wonder if this was a timing issue with the fade speed getting messed up with the setInterval delay causing a mixed order of triggering. If this is the case then I don't know how to fix it.

But having seen the css behaviour I now wonder if it's an underlying problem in the way that jQuery implements it's 'fadeIn' and 'fadeOut' functions??!!

I gave your code a little workaround and came up with this working piece of code:

$(document).ready(() => {

let numImages = 4;
let currentImage = 1;

function changeImage() {
    $('#img-' + currentImage).fadeOut(1000, function() {
        if (currentImage === numImages) {
            currentImage = 0;
        }
        currentImage++;
        $('#img-' + currentImage).fadeIn(1000, function() {
            changeImage();
        });
    })
}

changeImage();

})