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 int

Answer 1

The problem is you are fading out at the same time as fading in. Using the standard easing functions, there is a point in the middle where both images are barely visible and a white space is left where the images were.

To fix this, I have switched around the order of you images so that the visible image is on top of the stack. Now we can place the new image on top of the currently visible image and fade it in. Once the new image is fully visible we hide the previous image. This makes for a much smoother transition.

$('#slideshow img:first').appendTo('#slideshow');
$('#slideshow img:last').fadeIn(1000, 'swing', function() {
    $('#slideshow img:last').prev().hide();
});

Here is a jsfiddle: http://jsfiddle.net/nyXUt/52/