Question

当鼠标悬停在事件上时，我会滑动div并在鼠标移出事件时将其滑回（隐藏）。如果我执行鼠标操作太快并将鼠标移开，则div会保持振荡。我该如何解决这个问题？

 $(document).ready(function() {
   $("#in").ready(function(){    
     $("#out").mouseover(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
   $("#in").ready(function(){    
     $("#out").mouseout(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
 });

<div id="out"><img src="pics/1.gif" ><div id="in"><h1>Google</h1></div></div>

Answer 1

您可以使用stop()方法：

停止匹配元素上当前正在运行的动画。

$("#out").mouseover(function () {
     $("#in").stop(true, true).animate({"height":"toggle"},200);
});

Answer 2

首先，您应该接受me和Raminson提供的建议。 stop()函数将暂停给定元素上当前正在运行的所有动画，并阻止您看到的行为。

关于您发布的代码，可以说另外两件事。

您在.animate()函数的参数中有一个尾随逗号。 {"height":"toggle",}。现在这可能适用于Chrome和Firefox，但在IE中可能无法正常工作，而且可能不会告诉你或为什么它无效。你不应该在JavaScript中的数组或对象中使用尾随逗号....
您将jQuery调用包装在文档就绪处理程序中（如您所愿），但随后您将代码包装在每个元素的另一个就绪处理程序中。$("#in").ready() ... $("#out").ready()。这是不必要的。您只需要一个就绪函数来确保加载DOM和jQuery。

如何解决鼠标悬停和鼠标移动的响应性

2 个答案: