2

我知道这看起来像重复：当鼠标在链接上快速移动但对我不起作用时， jquery hover() mouseOut 事件未触发。我是 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);
});});

谢谢！！

4

1 回答 1

2

我认为使用.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="" />

于 2013-07-29T22:23:17.450 回答