jquery鼠标全力以赴事件发生时，鼠标快速移动图像

我知道这看起来像一个副本：jquery hover() mouseOut event not firing when mouse is moved quickly over link，但不是为我工作。我是没有JavaScript或jQuery知识的PHP程序员。现在我试图做一个非常简单的图标动画，得到2图像，当鼠标结束时，它会更改为第二个图像，只要jQuery FadeIn fadeOut函数。很简单。就像上面的链接一样，当鼠标指针熄灭时，我制作了一个回调函数来触发fadeOut效果，但是当我稍微移动鼠标时，事件再次启动，然后再次启动。我希望自己清楚（新手英语人士）。这是迄今为止的代码：jquery鼠标全力以赴事件发生时，鼠标快速移动图像

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

谢谢！

来源

2013-07-29 diegoalmesp

我认为使用.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/[email protected]?v=fde65a5a78c6" id="icon" alt="" />

来源

2013-07-29 22:23:17 Sergio

这解决了我的问题，但今天，我不知道如何投票呵呵，谢谢塞尔吉奥！ – diegoalmesp

@diegoalmesp不客气。如果你想你也可以投票:)顺便说一句，刚刚添加了一个CSS版本，总比jQuery好！ http://jsfiddle.net/g995b05g/ – Sergio

jquery鼠标全力以赴事件发生时，鼠标快速移动图像

回答

相关问题