jQuery悬停无限循环

Question

我正在尝试使用 .hover 使 HTML 元素看起来像在发光。我的代码如下：

var glow = $('<div class="glow">...</div>');

$(this).hover(function() {
   glow.fadeIn();
}, function() {
   glow.fadeOut();
}

我得到的效果是，在鼠标悬停时，淡入淡出只是在无限循环中一遍又一遍地重复。当我查看控制台时，hoverIn 和 hoverOut 处理函数不断被调用。

有什么想法吗？

谢谢！

Answer 1

我想你想改用这段代码：

var glow = $('<div class="glow">...</div>');

glow.hover(function() {
   $(this).fadeIn();
}, function() {
   $(this).fadeOut();
}

或

var glow = $('<div class="glow">...</div>');

glow.hover(function() {
   glow.fadeIn();
}, function() {
   glow.fadeOut();
}

我相信现在您的 $(this) 是模棱两可的，并且可能没有将 hover() 处理程序放在正确的对象上。

您也有可能在这里遗漏了一些重要的东西（例如，glow 放入 DOM 的位置）。

如果情况变得更糟，您可以完全跳过hover，而只使用mouseover 和mouseout，或者如果您想要真正了解整个事情，您可以将 bind 与 mouseover 和 mouseout 事件一起使用。

实际上，由于您在单个鼠标悬停事件上看到重复操作，这可能表明您以某种方式将单个 hover 处理程序的许多实例绑定到 glow 对象。如果最终出现这种情况，您可以使用unbind 在绑定新处理程序之前删除当前处理程序，但如果您能找到一种方法，避免多重绑定是更好的策略。

我希望这会有所帮助！