Изображения исчезают друг в друга в слайдере

Question

Я работаю над ползунком jQuery. В настоящее время изображения исчезают, а затем исчезает следующее изображение в слайдере. Но мне нужно, чтобы изображения затухали друг в друга. Поэтому во время перехода я не увижу фон страницы.

Вот мой JQuery код:

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

Любая идея? Спасибо!

Answer 1

Вам понадобится ваш собственный fadeIn. Насколько я понимаю, вам нужно будет fadeIn в то же самое время, которое может работать хакерски с jQuery, но будет проще, если вы просто напишете простую функцию, которая одновременно их затухает (т. е. снимает непрозрачность один за другим более нескольких сот итераций).