jquery圖片庫 - 第一個圖像不褪色

Question

我創建了一個jQuery圖像庫。 它幾乎完美地工作，所有的圖像隨着淡出/變化而變化。

問題是：在最後一張圖片之後，第一張圖片顯示沒有淡入淡出效果。

HTML代碼：

<div id="gallery-holder"> 
    <img src="images/main-galery1.jpg" class="active" > 
    <img src="images/main-galery2.jpg" > 
    <img src="images/main-galery3.jpg" > 

</div> 

CSS代碼：

#gallery-holder{ 
    position:relative; 
    top:0px; 
    width:980px; 
    height:300px; 
    margin-left:auto; 
    margin-right:auto; 
    overflow:hidden; 
} 

#gallery-holder img{ 

    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
} 

#gallery-holder .active{ 
    z-index:10; 
} 
#slideshow IMG.last-active { 
    z-index:9; 

} 

Java腳本

$(document).ready(function(){ 
slideSwitch(); 
}); 



function slideSwitch() { 
var $active = $('#gallery-holder IMG.active'); 

if ($active.length == 0) $active = $('#gallery-holder IMG:last'); 

var $next = $active.next().length ? $active.next() 
    : $('#gallery-holder IMG:first'); 

$active.addClass('last-active'); 

$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
    }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

什麼建議嗎？

我試圖取代：

$active.removeClass('active last-active'); 

與此：

$('#gallery-holder IMG.active').removeClass('active last-active'); 

沒有運氣

Answer 1

讓事情簡單化。無混濁/ CSS，沒有活動類，只是簡單的jQuery變淡：

(function slideSwitch() { 
    var $gallery = $('#gallery-holder'), 
     $active = $gallery.find('img:visible'), 
     $next = $active.next().length ? $active.next() : $gallery.find('img').first(); 

    setTimeout(function() { 
     $active.fadeOut('fast'); 
     $next.fadeIn('fast', slideSwitch); 
    }, 2000); 
}()); 

演示：http://jsfiddle.net/AlienWebguy/npTD9/