jQuery - 停止正在进行的动画（fadeOut）并在鼠标快速进入/离开时再次显示 [英] jQuery - stop animation in progress (fadeOut) and show again when mouse enters/leaves quickly

问题描述

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

I have a <div> that when hovered over, will show some text. When the mouse leaves, the text fades out. However, if the mouse enters the <div> again before the fadeOut is complete, the text never shows again.

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

I am aware of hoverintent, but I'd prefer not to use it because of the slight perceived delay it gives to the mouseEnter/mouseLeave events.

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

Is there no way that, upon mouseEnter, it simply clears the fadeOut and shows the text again?

我目前使用超时的尝试：

My current attempt using timeouts:

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（）函数：停止（true，true）

Issue was needing to pass both parameters to the stop() function: 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（）功能：

You want to look into the JQuery stop() function:

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

这篇关于jQuery - 停止正在进行的动画（fadeOut）并在鼠标快速进入/离开时再次显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！