jQuery悬停无限循环

发布于 2024-10-11 20:45:00 字数 325 浏览 7 评论 0原文

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

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

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

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

有什么想法可能会发生什么吗？

谢谢！

原文

I'm trying to use .hover to make an HTML element look like it's glowing. My code looks like:

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

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

The effect I'm getting is that the fades just keep repeating over and over again on mouseover in an infinite loop. When I look at the console, the hoverIn and hoverOut handler functions just keep getting called.

Any ideas what might be going on?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦在深巷 2024-10-18 20:45:00

我认为您想改用此代码：

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

我希望这有帮助！

I think you want to use this code instead:

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();
}

I believe right now your $(this) is ambiguous, and is probably not putting the hover() handler on the right object.

It's also possible that you've omitted something important here (as in, where is glow put into the DOM).

If worse comes to worse, you can skip hover entirely and just use mouseover and mouseout instead, or if you want to get really manual about the whole thing, you can use bind with the mouseover and mouseout events.

Actually, since you're seeing repetitive action on a single mouseover event, that might indicate that you've somehow bound many instances of your single hover handler to the glow object. You can use unbind to remove the current handler before binding a new one if this ends up being the case, but avoiding the multiple binding is a better strategy if you can find a way to do so.

I hope this helps!

回复收藏 0 原文

~没有更多了~