Images fades into each other in slider
<p>I'm working on a jQuery slider. Currently, the images are fading out, and then the next image in the slider fades in. But what I would need, is the images the be fading into each other. So I won't see the page background during the transition.</p>

<p>Here's my jQuery code :</p>

<pre><code>$('.slider .slide:first').addClass('active').fadeIn(900);

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

$('.slider-nav li').click(function() {
    clearInterval(timer);
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
    var index = $(this).index('li');
    rotate(index);
    timer=setInterval(go, 5000);
    return false;
});
$('.slider-nav li:first').click();
var timer=setInterval(go, 5000);
function go() {
    var $next = $('.slider-nav li.active').next();
    if ($next.length == 0){
        $next = $('.slider-nav li:first');
    }
    $next.click();
}
</code></pre>

<p>Any idea? Thank you!</p>
