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

Question

我几天前刚开始学习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 开始来回痉挛一样。有没有办法放一些东西来防止这种事情发生？谢谢！

Answer 1

而不是home.animate()使用home.stop().animate()。

使用 stop() 可防止动画一个接一个地排队。

Answer 2

当您来回移动鼠标时，您正在排队其他动画。为了防止这种情况，请使用stop()方法

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

API 参考：http://api.jquery.com/stop/

Answer 3

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