Question

I’m working on a Slider for a client. He already made up most of the work but he needs me to find a way to make his slides cross-fade…instead of fading-out and fading-in.
He really wants to keep the base of the code.

Here’s a fiddle.

The jQuery looks like this :

$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);​

Keeping this code, I need to modify it to make the images crossfade.
I know there’s plugins like jQuery Cycle…but I need to keep the client’s code and modify it.

Thank you!

Answer 1

I successfully use a function like:

function crossfade() {
   $(".slide").first().appendTo('.slider').fadeOut(200,'linear');
   $(".slide").first().fadeIn(200,'linear');
   setTimeout(crossfade, 2000);
}

$(function(){
    $(".slide").first().fadeIn(200);
    setTimeout(crossfade,2000);
});