0

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

4

3 回答 3

1

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

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

于 2012-11-21T23:57:22.330 回答
0

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

于 2012-11-22T00:02:15.047 回答
0

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

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

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

于 2012-11-22T00:00:22.100 回答