動畫圖像的使用Javascript

Question

衰落

目前，我有下面的代碼覆蓋添加到圖像上，當你在它懸停：

<script> 
    function toggleOverlay(name, newState){ 
     var element = 'imgOverlay' + name; 
     var newDisplay 

     if (newState == 0) {newDisplay = 'none'} 
     if (newState == 1) {newDisplay = 'block'}   

     document.getElementById(element).style.display = newDisplay; 
     //document.getElementById(element).style.z-index = '5'; 
    } 

    function clearOverlays(){ 
     toggleOverlay('SteBes',0); 
     toggleOverlay('VicGun',0); 
     toggleOverlay('SteFry',0); 
     toggleOverlay('DomSag',0); 
     toggleOverlay('DenCro',0); 
     //toggleOverlay('UnkOne',0); 
     //toggleOverlay('UnkTwo',0); 
     toggleOverlay('SteWoz',0); 
    } 
</script> 

我怎樣才能淡入覆蓋截至目前它只是突然改變？

謝謝。

Answer 1

爲什麼不使用JQuery？你可以開箱即用。

Answer 2

這裏是JavaScript示例使用CSS3

http://jsfiddle.net/sLNqm/

請到以下鏈接有jQuery的樣品示例

http://api.jquery.com/fadeIn/

$(document.body).click(function() { 
    $("#DivName").fadeIn("slow"); 
});