Jquery slideshow with fadeOut - without fadeIn

Question

I have a simple jquery slideshow on my website that uses fadeIn and fadeOut. The fadeIn/Out is creating a flash of my background which I find irritating. I've tried replacing with other transitions but no luck.

My goal is to have the images basically fade into each other seamlessly, without the dark images showing a flash of my background during the transition.

My jquery:

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  3000);
});

Answer 1

I had a similar problem sometime ago. Without you providing a fiddle it is difficult to give you an example of the exact code you need. Basically the concept is, you need to begin to show the next image as you fade out the current image

DEMO http://jsfiddle.net/nyXUt/161/

var speed = 2000;
run = setInterval("switchSlide()", speed);
$(document).ready(function () {

    $('#caption').html($('#slideshow img:first').attr('title'));

    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function () {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });

    $('#next').click(function () {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });

});

function switchSlide() {
    $('#slideshow img:first').fadeOut(1000).next().show().end().appendTo('#slideshow');
    $('#caption').html($('#slideshow img:first').attr('title'));
}