我在jQuery中的滑动导航div有问题

几天前我刚开始学习jQuery/javascript，我喜欢边做边学，我创建了这些用于导航的div。一开始它们看起来不错，但如果我继续四处导航，点击几下就会发现它们有问题

var home=$(".navHome");
home.mouseover(function(){
  home.animate({
   left:'30px',
   top:'25px',
   opacity:'0.75',
   });
  });
home.mouseout(function(){
 home.animate({
  left:'25px',
  top:'25px',
  opacity:'1',
 });
});
home.mouseover(function(){
  home.addClass("orangeText");
});
home.mouseout(function(){
  home.removeClass("orangeText");
});

---

有没有一种方法可以简化此过程，使其更好地工作？而且，当我的鼠标在div上快速来回移动几次时，就像div开始来回痉挛一样。有没有一种方法可以防止这种事情发生？谢谢

使用

home.stop（）.animate（）

而不是

home.animate（）

---

使用

stop（）

可防止动画一个接一个地排队。

当您来回移动鼠标时，您正在排队等待其他动画。要防止这种情况，请使用

stop（）

方法

home.mouseover(function(){
  home.stop(true,true)animate({/* settings*/})
})

---

API参考：

如果$.animate（）.stop（）仍在堆积动画队列，则使用$.css（），因为它的渲染速度大约快10倍

您可以使用home.is（“：animated”）阻止移动队列。检查home是否已使用此设置动画，并且仅在未设置动画时才执行操作。