我有一个简单的图像菜单。有一个背景图像在悬停时消失以显示菜单项。我正在寻找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()`只能够对数字值进行动画处理。