jQuery - 停止正在进行的动画（fadeOut）并在鼠标快速进入/离开时再次显示

Question

我有一个＆lt; div＆gt;当盘旋时，会显示一些文字。当鼠标离开时，文本淡出。但是，如果鼠标进入＆lt; div＆gt;在fadeOut完成之前，文本再次显示。

我知道hoverintent，但我不想使用它，因为它会给mouseEnter/mouseLeave事件带来轻微的延迟。

根据mouseEnter，它是否无法清除fadeOut并再次显示文字？

我目前使用超时的尝试：

var timeouts = {};

$(document).ready(function(){
  $('#wrapper').hover(function(){
    clearTimeout(timeouts['test_hover']);
    $('#text').show();
  }, function(){
    timeouts['test_hover'] = setTimeout(function(){
      $('#text').fadeOut('slow');
    });
  });
});

jsbin：http://jsbin.com/upotuw/5

视频：http://www.youtube.com/watch?v=7RLrz1bEQuU

-

编辑：问题需要将两个参数传递给stop()函数：stop(true,true)

最终工作代码如下：

var timeouts = {};

$(document).ready(function(){
  $('#wrapper').hover(function(){
    clearTimeout(timeouts['test_hover']);
    $('#text').stop(true,true).show();
  }, function(){
    timeouts['test_hover'] = setTimeout(function(){
      $('#text').fadeOut('slow');
    });
  });
});

http://jsbin.com/upotuw/7

Answer 1

您想要查看JQuery stop()函数：

http://api.jquery.com/stop/