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

so i'm trying like, hover on text , appears right beside it:

$('.lang1').mouseenter(function() {          $('.lang1 span').fadeto('fast', 1);     });  $('.lang1').mouseleave(function() {         $('.lang1 span').fadeto('fast', 0);     }); 

but once remove mouse on it still appears, faint it's visible. works intended doesn't lose it's opacity completely, have keep hovering , moving mouse away lose it's opacity completely.

anyone have suggestions?

css:

span {     opacity: 0; } 

html:

<li class="lang1">html     <span>pretty at</span></li> 

i'd use fadein('fast') , fadeout('fast') fading effect , use callback hide element. this:

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

i think simpler alternative change css display:none; , let jquery handle opacity when have mouse events trigger $('.lang1 span').fadeout('fast');