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

Question

我知道这看起来像: jquery hover() mouseOut event not firing when mouse is moved quickly over link 的重复项但不适合我。我是 PHP 程序员，不懂 javascript 或 jquery。现在我正在尝试制作一个非常简单的图标动画，有两个图像，当鼠标悬停时，它会更改为第二个图像，其中包含 jquery fadeIn fadeOut 函数。很简单。就像上面的链接一样，我创建了一个回调函数，以在鼠标指针移出时触发 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="" />