jQuery Slideshow Image Transition

Question

I'm having an issue with my jQuery slideshow and I can't seem to figure it out. During the transition of images the slideshow will flash white instead of nicely fading into the next picture. I believe it has something to do with the following lines of code:

$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');

Clicking the previous and next buttons cause the same issue.

Here's a jsFiddle of the slideshow.

Thanks!

Answer 1

I have re-factored your code and posted it here:

http://jsfiddle.net/salman/nyXUt/44/

The main changes are as follows:

White flash workaround: you were using fade-out and fade-in. When the two animations are started together, both images become 50% transparent at one point and slide appears whitish (or background colorish). I have used another approach. Using z-index, I place the "to hide" image in front of "to show" image then fade out the "to hide" image:

#slideshow .current {
    display: block;
    z-index: 1;
}
#slideshow .animate {
    display: block;
    z-index: 2;
}

nextItem.addClass("current");
prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () {
    $(this).removeClass("animate").css("display", "");
});

setInterval vs setTimeout: I used setTimeout instead of setInterval which gives more control over timing. The automatic transition is re-scheduled when the user interrupts them with prev/next buttons.

Animation timings: I added callbacks and .stop() to animation to prevent overlapping animations.