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倍

我在jQuery中的滑动导航div是错误的

3 个答案: