從DIV褪色到圖像中的jQuery

Question

我有一個<div>設置爲這樣：

#menu_one 
{ 
    height:50px; 
    width:150px; 
    background-color:#666666; 
} 
</style> 

<div id="menu_one"></div> 

我想要做的是有這個<div>漸變成圖像，這將是大小相同的上鼠標懸停然後在鼠標退出時淡出。

有灰色的背景圖像然後在兩幅圖像之間淡出會更好嗎？

我該如何做到這一點？

Answer 1

您在某處創建了一個隱藏圖像。當通過DIV用戶將鼠標移動，你的位置在它的圖像和消除它。

翻譯在jQuery代碼前面的句子作爲練習留給讀者:)

Answer 2

，可以使用絕對定位和的z-index：

<style> 
#menu_one 
{ 
    position: absolute; 
    top: 0px; 
    height:50px; 
    width:150px; 
    background-color:#666666; 
    z-index: 0; 
} 
#imgDiv 
{ 
    position: absolute; 
    top: 0px; 
    height:50px; 
    width:150px; 
    z-index: -1; 
} 
</style> 

<script> 
$(function(){ 
    $("#menu_one").mouseover(function() { 
     $("#menu_one").fadeOut(); 
    }); 
    $("#imgDiv").mouseout(function() { 
     $("#menu_one").fadeIn(); 
    });  
}); 
</script> 

<div id="menu_one"></div> 
<div id="imgDiv"><img src="image.png"/>