CODEWITHSUNDEEP
jquerybackground-imagefadeeffectmouseenter
delato468
delato468

Reputation: 484

JQuery fade effect for background image on mouseenter

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.

Upvotes: 1

Views: 396

Answers (2)

Jonathan Buchanan
Jonathan Buchanan

Reputation: 878

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

Upvotes: 1

axel schouten
axel schouten

Reputation: 1

i try, but i am not sure with this solution, maybe use just css

Need jquery library !

FIDDLE

$("#navi li a").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

Upvotes: 0

Related Questions