javascript - 一个平滑褪色的 Logo 错误

Question

因此，我们假设我在 Logo 之上有一个 Logo ，并且其中一个 Logo 是隐藏的。现在，如果我将鼠标移到 Logo 上， Logo 将平滑淡入，如果鼠标离开， Logo 将平滑淡出。到目前为止，我已经一切顺利。然而，真正让我烦恼的是，如果我将鼠标快速移到 Logo 上，它就会闪烁。我希望它始终顺利。由于我对 javascript 和 jQuery 很陌生，那么也许这里有人会知道如何修复这个错误。希望不是通过重写整个代码，不是有很多......无论如何，这是代码:

$(function() {
    $(document).ready( function () {
          $('#img2').hide();
    });
    $('#logo').hover(       
        function () {
            var $this = $(this);
            $('#img2',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $('#img2',$this).stop(true,true).fadeOut();
        }
    );
});

和here's摆弄 Logo 和所有...

所以我希望你们都明白问题是什么以及我在这里想要实现的目标。非常感谢任何帮助。

Answer 1

尽量避免不必要的 JavaScript 动画，而使用 CSS 过渡。

CSS:

#img2 {
    transition: 1s;
    opacity: 0;
}
#img2:hover {
    opacity: 1;
}

来自 CSS tricks 的更多信息.
<强> Fiddle