我有一個簡單的圖像菜單。有一個背景圖像在懸停時消失以顯示菜單項。我正在尋找jQuery解決方案來慢慢淡出此圖像。有任何想法嗎？淡出背景圖像

HTML：

<div id="m1"> 
    <ul class="joomla-nav"> 
     <li>...</li> 
    </ul> 
</div>

CSS：

#m1 { 
background-image:url('../images/m1.jpg'); 
width:320px; 
height:210px; 
background-color:#1F91B7; 
float:left;} 

#m1:hover { 
background-image:none; 
background-color:transparent} 

#m1:hover .joomla-nav { 
display:block!important; } 

#m1 .joomla-nav { 
display:none!important; }

非常感謝！

來源

2012-02-27 capola

完全重複http://stackoverflow.com/questions/977090/jquery-fade-in-background-image – elclanrs 2012-02-27 09:30:47

[Animate背景圖像更改與jQuery]的可能重複（http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery） – Starx 2012-02-27 09:43:54

.fadeOut（）方法動畫化匹配元素的不透明度。一旦透明度達到0，顯示樣式屬性設置爲無，所以該元素不再影響頁面的佈局

我們可以激活一個簡單的圖片：

<div id="clickme"> 
    Click here 
</div> 
<img id="book" src="book.png" alt="" width="100" height="123" />

隨着最初顯示的元素，我們可以慢慢隱藏它：

試試這個，並告訴它是否有效。

來源

2012-02-27 09:32:56 Java

不透明度也會淡出背景顏色。編輯：我看到你已經把圖像以外的div，我不會建議。 – MattP 2012-02-27 09:35:57

'.fadeOut（）'不會工作，因爲該元素將被設置爲'display：none'從而從DOM流中移除。更好的方法是$（'＃book'）。fadeTo（0，'fast'）'。 – elclanrs 2012-02-27 09:37:38

jQuery的`.animate()`只能夠對數字值進行動畫處理。

不像background-color a background-image不是用數字表示的，所以不能動畫。

你可以做的是使用另一個div沒有背景。然後淡化當前div，以便它看起來像當前背景淡出。

來源

2012-02-27 09:42:46 Starx

淡出背景圖像

回答

jQuery的.animate()只能夠對數字值進行動畫處理。

相關問題

jQuery的`.animate()`只能夠對數字值進行動畫處理。