Jquery 滑块-交叉淡入，而不是淡出淡入

我正在为一个客户制作一个滑块。他已经完成了大部分工作，但他需要我找到一种方法让他的幻灯片交叉淡入…而不是淡出淡入。 他真的想保留代码的基础

这是一个例子

jQuery如下所示：

$('.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);​

保留这段代码，我需要修改它以使图像淡入淡出。 我知道有像jQuery Cycle这样的插件……但我需要保留客户端的代码并对其进行修改

---

谢谢大家!

您需要将幻灯片放置在容器内的绝对位置1上，位置：相对

然后改变你的功能

function rotate(index) {
    $('.slider .slide.active').removeClass('active').animate({'opacity' : 0});
    $('.slider .slide:eq(' + index + ')').addClass('active').animate({'opacity' : 1});
}

---

我成功地使用了如下函数：

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);
});

---

你也需要执行代码。。。请参阅我的编辑。哦……当然。为什么从幻灯片2开始而不是从幻灯片1开始？@user1388136是的，我还没想到。有点变了。。。查看我的编辑。。。