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

并且here's摆弄了徽标和所有......

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

Answer 1

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

<强> CSS：

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

来自CSS tricks的更多信息。
的 Fiddle

一个平滑的褪色徽标bug

1 个答案: