Question

I’m trying to add a simple fade in/out effect to the buttons by jQuery but I’m a bit stuck with fading out. I use this code:

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(0).removeClass('hover').fadeIn(0);
});

It adds a hover class which defines a css background and fade the hover image in. But when I move a cursor out of the button, it simply disappears as normally, no fading out.

Can you help me with this please?

Thanks a lot for all replies

Answer 1

These two functions are opposites of each other, so should work… (code updated)

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(300)
         .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });
});

That’s pretty ugly… See it in action on http://jsfiddle.net/zS6ex/.

However, you still have a problem: you’re fading the whole link in or out, not only the image. As far as I know, you cannot set background image opacity separately (setting full opacity is already a pain if you do it manually…)