.fadeTo('fast', 0) не работает должным образом? - JQuery

Question

Итак, я пытаюсь что-то вроде, где вы наводите курсор на текст, и что-то появляется прямо рядом с ним:

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

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

Но как только я наведу на нее мышь, она все еще кажется очень слабой, но видимой. Он работает точно так, как задумано, но он не теряет полностью свою непрозрачность, вам нужно постоянно зависать и отодвигать мышь от нее, чтобы полностью потерять ее непрозрачность.

У кого-нибудь есть предложения?

CSS:

span {
    opacity: 0;
}

HTML:

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

Answer 1

Я бы просто использовал fadeIn('fast') и fadeOut('fast') для эффекта затухания, а затем использовал бы обратный вызов, чтобы скрыть элемент. Что-то вроде этого:

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

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

Я думаю, что более простой альтернативой было бы изменить CSS на display:none; и пусть jQuery обрабатывает непрозрачность, когда у вас события мыши вызывают $('.lang1 span').fadeOut('fast');

Answer 2

Почему вы не используете fadeToggle?

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