淡出背景图像

Question

I have a simple image menu. There is a background-image which disappears on hover to show the menu items. I am looking for jQuery solution to fade out this image slowly. Any ideas?

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

Many thanks!

Answer 1

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page

We can animate a simple image:

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

With the element initially shown, we can hide it slowly:

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

Try this, and tell if it works.

Answer 2

jQuery's .animate() is only able to animate numeric Values.

Unlike background-color a background-image is not represented by numbers, so it cannot be animated.

What you can do is use another div with no background. And then fade the current div, so that it will look like the current background is fading out.