jquery - Images fades into each other in slider

Question

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.

Here's my jQuery 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();
}

Any idea? Thank you!

Answer 1

您将需要自己的淡入淡出-据我所知，您需要同时淡入淡出两者，这可能与 jQuery 一起工作有点笨拙，但是，如果您只编写一个简单的函数会更容易同时淡入它们（即在数百次迭代中一个接一个地降低不透明度）。