如何防止鼠标离开后鼠标悬停效果不消失

Question

我正在尝试做鼠标悬停并显示拇指效果，这是示例代码：

<ul>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li> 
   <img class="img" src="http://jsfiddle.net/img/logo.png" style="display:none">
</ul>

js脚本：

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).fadeIn();
},
  function(e){
    $('.img').hide();
});

演示可以在这里查看：http://jsfiddle.net/8zG2Q/2/,

问题是当鼠标快速移到项目上时，鼠标离开所有项目后图像并没有隐藏。我尝试使用 show() 而不是 fadeIn()，但这无济于事，因为我从服务器加载图像，需要时间才能看到。

那么，当鼠标不在所有项目中时，隐藏图像的好方法是什么？感谢您的帮助。

Answer 1

在调用fadeIn() 之前，停止动画（可选地清除队列并跳转到动画的末尾）然后隐藏元素（重置为“基本状态”），如下所示：

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).stop(true,true).hide().fadeIn();
},
  function(e){
    $('.img').hide();
});