当鼠标在图像上快速移动时，jquery mouse over and out 事件触发

Question

我知道这看起来像：jquery hover() mouseOut event not firing when mouse is moved quickly over link 的副本，但对我不起作用。 我是 PHP 程序员，不了解 javascript 或 jquery。 现在我正在尝试制作一个非常简单的图标动画，得到 2 张图像，当鼠标悬停时，它会更改为第二张图像，使用 jquery fadeIn fadeOut 函数。很简单。 就像上面的链接一样，我创建了一个回调函数来在鼠标指针离开时触发淡出效果，但是当我稍微将鼠标移到上方时，事件会再次触发。我希望我让自己清楚（新手说英语）。 这是到目前为止的代码：

<img src="<?= base_url(); ?>img/face1.jpg" id="icon"> //<-- this function is from codeigniter, to get the base url

和 jQuery 函数（在一个单独的文件中）：

$(document).ready(function(){
$("#icon").mouseover(function() {
    $(this).fadeOut(1000);
}).mouseout(function(){
    $(this).fadeIn(1000);
});});

谢谢！！

Answer 1

我认为使用.mouseenter()会更好。

在这种情况下，您只会获得 1 个事件，而使用鼠标悬停会获得很多事件。 所以你的代码可能是：

$(document).ready(function() {
    $("#icon").mouseenter(function() {
        $(this).fadeOut(1000);
    }).mouseout(function() {
        $(this).fadeIn(1000);
    });
});

你也可以只用 CSS 做到这一点：

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

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6" id="icon" alt="" />