JQuery fade effect for background image on mouseenter

Question

I want to add a JQuery fade effect for my navigation on mouseenter of a button. I have created a mouseover style in my CSS already, but without fade for browsers who do not have javascript activated.

My structure: Jsfiddle

#menu li:hover {
 background-image: url(http://file2.npage.de/012690/81/bilder/menu_sub_hover.png);
 }

In this code is the pic, which opens on mouseover.

Answer 1

Update:

If you wish to use Jquery then you should use .fadeTo(duration, opacity)

Here is a quick code example

$('.fade')
  .on('mouseenter', function(){$(this).fadeTo(400,.5);})
  .on('mouseleave', function(){$(this).fadeTo(400,1);});

Fiddel: http://jsfiddle.net/eoze559h/7/

---

If you wish to do a fade why not do it all with CSS as well?

Fiddel:http://jsfiddle.net/eoze559h/5/
Here is the CSS code example:

.fade {

    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
      opacity: 0.5;
}