3

我有一个 <div> ，当它悬停在上面时，会显示一些文本。当鼠标离开时，文本淡出。但是，如果鼠标在完成之前再次进入 <div> 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

4

1 回答 1

4

您想查看 JQuerystop()函数：

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

于 2012-04-16T14:20:12.347 回答