Question

我知道这看起来像是jquery hover() mouseOut event not firing when mouse is moved quickly over link的副本，但不适合我。我是PHP程序员，不知道javascript或jquery。现在我正在尝试制作一个非常简单的图标动画，得到2个图像，当鼠标结束时，它变为第二个图像，其中jquery淡入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="" />

当鼠标在图像上快速移动时，jquery鼠标反复出现事件

1 个答案: