JavaScript jQuery animate 的一个小问题

metal · 2013年05月22日 · 最后由 ChanceDoor 回复于 2013年05月24日 · 3224 次阅读
$('.forward').click(function() {
   $('.box').animate({left: '+=80px'});
})

当我对着 button(.forward) 连续快速点击 10 次,这个动画就会执行 10 次。这个要这么破,看起来挺傻的。

详情,请连续点击 button: http://jsfiddle.net/kennx/SML4g/

#1 楼 @gsshcl stop() 我试过了有问题。你连续点击的时候,可能没到 animate 没有让 left 到 80px 就已经 stop()。例如你做一个幻灯片的话,你每次让每张图片偏移-=100px,当你连续点击的时候,stop() 可能会卡在 -50px 的时候。

#2 楼 @metal .stop() 有參數可以讓動畫直接跳到最後。 .stop( [clearQueue ] [, jumpToEnd ] ) $('div').stop(false, true).animate()就行了。

在 stackoverflow 找到一個解答:http://stackoverflow.com/a/13710765/1008230

$('.forward').click(function() {
  if ($(".box").filter(':animated').length > 0) {
      return false;
  }
  $('.box').animate({left: '+=80px'});
});

是利用 :animated 判斷是否正在動畫 不知哪種做法較好?

试试 .one ?

$('.forward').one('click', function(){
  $('.box').animate({left: '+=80px'});
});

http://api.jquery.com/one/

#3 楼 @gsshcl 不行 连点就丢帧了 不过把第二个参数也改为 false 效果也不错 有些时候就是要这样的 #6 楼 @liluo 不行 只能点一次

#5 楼 @evanc3 效果拔群!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号