mouseenter 事件的 jQuery 延迟问题

Question

这应该很简单......不知道为什么它会给我带来麻烦。我有一个简单的 mouseenter 函数。工作正常。我想做的是只有在悬停2.5秒后才启动该功能。

我的工作功能是这样的……

工作脚本

$('.profileimage').mouseenter(function(e) {
  $(this).parent().parent().find('.profileInfo').css({'top': (e.pageY + 25),'left': (e.pageX + 25)}).fadeIn('slow');
});

很简单......它所做的只是淡入我目前隐藏的div 元素。

现在，为了增加延迟，我将其封装在 setTimeout(function() 中，因为在阅读了此处的其他一些帖子后，这似乎是正确的解决方案。所以现在我得到了这个......

脚本不工作

$('.profileimage').mouseenter(function(e) {
  setTimeout(function() {
  $(this).parent().parent().find('.profileInfo').css({'top': (e.pageY + 25),'left': (e.pageX + 25)}).fadeIn('slow');
  }, 2500);
});

显然，我没有正确使用 setTimeout 函数，或者我认为这会起作用。

工作演示：http://jsbin.com/AqiFEQI/1/edit

破解演示：http://jsbin.com/AqiFEQI/2/edit

如果您尝试工作代码，当您将鼠标悬停在 Charles 上时，您会看到一个丑陋的 div 弹出。在损坏的样本中，没有任何反应。

任何帮助将不胜感激...

Answer 1

当调用超时回调时，这将等于窗口。改为

$('.profileimage').mouseenter(function(e) {
    var elem = this;
    setTimeout(function() {
       $(elem).parent().....;
    }, 2500);
});

更新 JSBin：http://jsbin.com/AqiFEQI/4/edit