jquery - 滑块 - 交叉淡入淡出而不是淡出和淡入

Question

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

这是一个小提琴。

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 这样的插件......但我需要保留客户端的代码并对其进行修改。

谢谢！

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

Answer 2

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

然后改变你的功能

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