淡出背景图像

Question

我有一个简单的图像菜单。有一个背景图像，在悬停时消失以显示菜单项。我正在寻找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;
}

非常感谢！

Answer 1

.fadeOut（）方法可以设置匹配元素的不透明度。一旦不透明度达到0，显示样式属性将设置为none，因此该元素不再影响页面的布局

我们可以为简单图像制作动画：

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

最初显示的元素，我们可以慢慢隐藏它：

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

试试这个，告诉它是否有效。

Answer 2

jQuery＆＃39; .animate()只能为数值设置动画。

与background-color不同，background-image不是数字代表，因此无法设置动画。

你可以做的是使用另一个没有背景的div。然后淡出当前的div，这样看起来当前的背景会逐渐消失。