为鼠标悬停时的 jquery 事件添加延迟

Question

我正在尝试为孩子的鼠标悬停事件添加一个简单的延迟，但遇到了困难。 （仍在学习！）

这使我能够在延迟后显示弹出窗口，但同时显示所有弹出窗口：

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

这可以仅显示我想要的弹出窗口，没有延迟：

onmouseover='$(this).children(\".skinnyPopup\").show()'

但组合不会：

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

任何帮助将不胜感激。谢谢！

Answer 1

您需要在执行时定义 this 是什么，类似这样的东西可以工作：

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

或者只使用 .delay()，如下所示：

$(this).children(".skinnyPopup").delay(600).show(0);

以上两个都是快速修复，我建议您远离内联处理程序并查看 不引人注目方法（请参阅此答案，作者：Russ Cam 出于一些重要原因），例如：

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});

Answer 2

这是因为 this 绑定到全局上下文，而不是元素。请使用类似以下内容：

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

如果您坚持使用内联事件处理程序，则以下内容也应该有效：

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'