1

每当有鼠标悬停事件时，我都会滑动 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>
4

2 回答 2

3

你可以使用stop()方法：

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

$("#out").mouseover(function () {
     $("#in").stop(true, true).animate({"height":"toggle"},200);
});
于 2012-07-14T21:09:44.723 回答
2

首先，你应该听从我和拉明森的建议。该stop()函数将停止给定元素上所有当前正在运行的动画并阻止您看到的行为。

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

  1. 您为.animate()函数提供的参数中有一个尾随逗号。 {"height":"toggle",}. 现在这可能适用于 Chrome 和 Firefox，但在 IE 中可能不起作用，而且更多可能不会告诉你它在哪里或为什么不起作用。JavaScript 中的数组或对象中不应该有尾随逗号。...

  2. 您将 jQuery 调用包装在文档就绪处理程序中（正如您应该做的那样），但随后您将代码包装在每个元素的另一个就绪处理程序中。$("#in").ready()... $("#out").ready(). 这是不必要的。您只需要一个准备好的函数来确保加载 DOM 和 jQuery。

于 2012-07-14T21:20:02.200 回答