一个平滑褪色的标志错误

Question

那么让我们假设我有一个标志在一个标志的顶部，其中一个是隐藏的。现在如果我移动我的鼠标在徽标上，徽标将平滑地淡出，如果鼠标离开，那么徽标将平滑地淡出。到目前为止，我的一切都很好。然而，真正让我恼火的是，如果我将鼠标快速移动到徽标上，它就会闪烁。我希望它在任何时候都是光滑的。因为我很新的javascript和jQuery那么也许有人在这里会知道如何修复这个bug。希望不是重写整个代码，不是有很多…总之，下面是代码:

$(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();
        }
    );
});

这里是标识和所有…

所以我希望你们都明白问题是什么，我想在这里实现什么。如有任何帮助，不胜感激。

Answer 1

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

CSS:

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

更多的CSS技巧。
小提琴