关于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

这将等于调用timeout-callback时的窗口。改为

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

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