jQuery悬停无限循环

Posted 2023-05-08

【中文标题】jQuery悬停无限循环

【英文标题】：jQuery hover infinite loop

【发布时间】：2011-06-07 12:56:34

【问题描述】：

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

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

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

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

有什么想法吗？

谢谢！

【问题讨论】：

如果你能提供一个jsfiddle.net会很好

请提供更多代码。您的$(this) 让我认为您可能将.hover() 分配为另一个事件的结果，因此它被重复分配。

我读到的方式似乎是在悬停时创建glow div，而不是淡入/淡出现有的div。 （不可否认，现在已经很晚了，我有点累了......）

jsfiddle: jsfiddle.net/c4ha7/1

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

我希望这会有所帮助！

【讨论】：

所以这行不通。问题可能是 .hover 的上下文。基本上，我在 dom 中寻找包含某个类（“glow”）的元素。如果元素具有类，我将附加一个新的 dom 元素。

这是一个 jsFiddle，它显示了我正在做的更多事情：jsfiddle.net/c4ha7/1