为什么在使用 .hover()、.addClass() 和 .hover()、.addClass() 时将光标快速移动到目标选择器上时 CSS 类和 jQuery 会卡住？ .removeClass()?
我创建了一个 h1 元素，当鼠标悬停在包含 DIV #logo 的上方和上方时，使用 < strong>jQuery 的 .hover() 方法与 jQuery UI 的 .addClass() 和 配合使用.removeClass() 方法。
它工作得很好，但只有当用户将鼠标悬停在 #logo 上并停下来等待 .addClass() 方法完成将新类添加到 h1 时，总共需要 300 毫秒。然而，如果用户在 .addClass() 方法的 300 毫秒结束之前离开 #logo DIV，则 jQuery .addClass()或 .removeClass() 方法瘫痪。尝试将光标移回#logo 不再影响h1。它会永久锁定到位，直到浏览器刷新为止。不可接受的。
您可以查看并尝试我在 JS Bin 的示例*。
尝试慢慢将鼠标悬停在屏幕中央的#logo DIV 框上，您知道，等待动画完成。然后将光标移开。一切都很好。现在尝试将光标快速移动到 #logo DIV 上，您将看到它锁定。
我必须对代码进行哪些更改才能避免发生此 jQuery 锁定？
编辑： @pointy 为我指明了正确的方向。我通过在 .addClass('hover',300) 之前应用 .stop(true,true) 以及在 之前应用它来停止锁定>.removeClass('hover',300)
I created an h1 element that gets a class added to it and removed from it with a duration of 300ms when the mouse hovers over and off of it's containing DIV #logo using jQuery's .hover() method in concert with jQuery UI's .addClass() and .removeClass() methods.
It works splendidly but only when the user hovers over #logo and stops to wait for .addClass() method to complete adding the new class to the h1 which takes 300 milliseconds total. If however the user moves off of the #logo DIV before the .addClass() method's 300 milliseconds are up, the jQuery .addClass() or .removeClass() method(s) get(s) paralyzed. Trying to move the cursor back into the #logo does not affect the h1 anymore. It is locked into place for good until a browser refresh. Unacceptable.
You can view and try out my example at JS Bin over here *.
Try hovering over the #logo DIV box in the center of the screen slowly, you know, wait for the animation to complete. Then move the cursor off of it. All is well. Now try to just move the cursor quickly over the #logo DIV and you will see it lock up.
What code changes do I have to make in order to get this jQuery lock up from occurring?
EDIT: @pointy pointed me in the right direction. I got it to stop locking up by applying .stop(true,true) before the .addClass('hover',300) as well as applying it before the .removeClass('hover',300)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在“removeClass”之前添加“stop”调用：
jQuery UI 类动画的内容很棘手。
Stick a "stop" call in before the "removeClass":
That jQuery UI class animation stuff is tricky.