滑塊 - 交叉漸變，而不是淡出和在

Question

我正在爲客戶端的滑塊工作。他已經完成了大部分工作，但他需要我找到一種方法讓幻燈片淡入淡出......而不是淡出和淡入。 他確實想保留代碼的基礎。

這是fiddle。

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在另一個容器內的位置：相對;

然後改變你的函數

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