.fadeTo('fast', 0) not working properly? - jQuery

Question

So I'm trying to something like, where you hover over text and something appears right beside it:

$('.lang1').mouseenter(function() { 
        $('.lang1 span').fadeTo('fast', 1);
    });

$('.lang1').mouseleave(function() {
        $('.lang1 span').fadeTo('fast', 0);
    });

But once I remove my mouse over it it still appears, very faint but it's visible. It works exactly as intended but it just doesn't lose it's opacity completely, you have to keep hovering and moving your mouse away from it to lose it's opacity completely.

Anyone have suggestions?

CSS:

span {
    opacity: 0;
}

HTML:

<li class="lang1">HTML     <span>Pretty good at</span></li>

Answer 1

I'd just use fadeIn('fast') and fadeOut('fast') for the fading effect and then use a callback to hide the element. Something like this:

$('.lang1').mouseleave(function() {

        $('.lang1 span').fadeOut('fast', function() { $(this).hide(); });
});

I think the simpler alternative would be to change the CSS to display:none; and let jQuery handle the opacity when you have the mouse events trigger $('.lang1 span').fadeOut('fast');

Answer 2

why you don't use fadeToggle?

$('.lang1').hover(function() {
  $(this).find("span").fadeToggle("fast");
});