1

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

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

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

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

任何想法可能会发生什么？

谢谢！

4

1 回答 1

2

我认为您想改用此代码：

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完全跳过而只使用mouseoverandmouseout来代替，或者如果您想对整个事情进行真正bind的手动操作，您可以使用mouseover 和 mouseout 事件。

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

我希望这有帮助！

于 2011-01-12T00:23:55.493 回答