fade in/out hover by jQuery

jquery fadein fadeout

12,445

Solution 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...)

Solution 2

Like answered many times here on SO, you need to use the callbacks from jQuery fx methods to do anything after an animation has completed.

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

Anyways, calling .fadeOut(0) would fade out that element with no animation at all, just like instant. First parameter is the duration.

http://api.jquery.com/fadeOut/

Solution 3

Why don't you just hide it while adding the class since fadeOut(0) doesnt have an animation

$('#header #menu li a').hover(function () {
  $(this).hide().addClass('hover').fadeIn(300);
},
function () {
  $(this).hide().removeClass('hover').show();
  //  as there is no fading time the line above will be equal to
  $(this).removeClass('hover');
});

when you need something done after an animation has completed you should use callback $(...).fadeIn(400,function(){ alert('this is the callback'); }, if you dont use the callback the code is runned while the animation is going.

and i dont know if its usefull but there is a pseudo class :hover in css, see here

The :hover pseudo-class is supported in all major browsers.

so with this you can do various things like:

#header #menu li a:hover { ...set style of 'a' when over 'a' }
#header #menu li:hover a { ...set style of 'a' when over 'li' }

just play with it a little and you can do a lot with just css

12,445

Author by

Machi

Updated on June 04, 2022

Comments

Machi almost 2 years
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
Machi almost 14 years

Thanks a lot for your reply, however the hover image stays on even if I move cursor away, it's weird.
Machi almost 14 years

Unfortunately it does still the same problem :(.
MvanGeest almost 14 years

CSS can't do animation in the versions most browsers implement now, though Safari can do some crazy things with proprietary function-like code (blargh)...
Ties almost 14 years

thats true, the fading itself needs to be done in javascript but maybe the complete hover-class could be replaced
Ties almost 14 years

still not convinced with the whole fadeOut(0) and fadeIn(0) why noy use show() and hide()? and whats wrong with just using the callback of fadeOut()?
MvanGeest almost 14 years

I have bad experiences with mixing fadeIn/fadeOut and show/hide. The callback method should work, but seemingly doesn't... I haven't looked into that. This code will eat time and space, but too little to notice anywhere. I think programming was more interesting when you had to be careful your program fit in that three kilobytes of memory... but I wasn't around then.