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删除当前处理程序，然后再绑定新处理程序，但如果您能找到一种方法，则避免多重绑定是更好的策略。

我希望这有帮助！