0

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!

Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
capola
  • 51
  • 1
  • 12
  • Exact duplicate http://stackoverflow.com/questions/977090/jquery-fade-in-background-image – elclanrs Feb 27 '12 at 09:30
  • possible duplicate of [Animate background image change with jQuery](http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery) – Starx Feb 27 '12 at 09:43

2 Answers2

0

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.

Java
  • 2,451
  • 10
  • 48
  • 85
  • Opacity will also fade out the background color. EDIT: I see you have put the image outside the div, I wouldn't recommend that. – MattP Feb 27 '12 at 09:35
  • 1
    `.fadeOut()` wouldn't quite work because the element will be set to `display: none` thus removed from the DOM flow. A better approach is `$('#book').fadeTo(0,'fast')`. – elclanrs Feb 27 '12 at 09:37
0

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Starx
  • 77,474
  • 47
  • 185
  • 261