javascript - 淡出背景图像

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，显示样式属性将设置为无，因此该元素不再影响页面的布局

我们可以为一个简单的图像制作动画:

<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.
  });
});

试试这个，看看它是否有效。