.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");
});