jQuery中的圖像翻轉效果？

Question

這裏我代碼 -

$('.smenu li').mouseover(function(){ 
     var src = $(this).find('a').attr('href'); 
     $('.hbg').css('background-image', 'url(' + src + ')'); 
     }); 

HTML代碼 -

<div class="smenu"> 
       <ul> 
        <li ><a href="images/hosp.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li> 
        <li ><a href="images/edu.jpg"><img src="images/menu_edu.jpg" border="0"></a></li> 
        <li ><a href="images/enter.jpg"><img src="images/menu_enter.jpg" border="0"></a></li> 
        <li ><a href="images/retail.jpg"><img src="images/menu_retail.jpg" border="0"></a></li>      
       </ul> 
       </div> 

這幹活不錯，但我怎麼可以設置圖像變化過程中的一些翻轉效果，因爲現在它只是改變了的背景和圖像閃光燈在鼠標結束，我想要一些淡入淡出或其他東西...

Answer 1

我以前有過這樣的問題。您需要將當前顯示的圖像放入背景中。然後在後臺注入一個img標籤（隱藏），將下一個圖像加載到圖像標籤中，然後淡入。這應該給你一個相當簡單的過渡。

從那裏你可以看看在圖像中滑動更多的花式。