2

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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Machi
  • 369
  • 3
  • 9
  • 18

3 Answers3

3

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

MvanGeest
  • 9,536
  • 4
  • 41
  • 41
  • Unfortunately it does still the same problem :(. – Machi Jul 27 '10 at 12:17
  • 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()? – Ties Jul 27 '10 at 12:57
  • 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. – MvanGeest Jul 27 '10 at 13:16
3

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/

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • Thanks a lot for your reply, however the hover image stays on even if I move cursor away, it's weird. – Machi Jul 27 '10 at 12:17
2

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

Ties
  • 5,726
  • 3
  • 28
  • 37
  • 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)... – MvanGeest Jul 27 '10 at 12:48
  • 1
    thats true, the fading itself needs to be done in javascript but maybe the complete hover-class could be replaced – Ties Jul 27 '10 at 12:52