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

jQuery - stop animation in progress (fadeOut) and show again when mouse enters/leaves quickly

本文关键字：鼠标 离开 显示 正在进行 动画 淡出 jQuery      更新时间：2023-09-26

我有一个

，当悬停在上面时，会显示一些文本。当鼠标离开时，文本淡出。但是，如果鼠标在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

你想看看 JQuery stop()函数：

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

相关文章：