$('.forward').click(function() { $('.box').animate({left: '+=80px'}); })
当我对着 button(.forward) 连续快速点击 10 次,这个动画就会执行 10 次。这个要这么破,看起来挺傻的。
详情,请连续点击 button: http://jsfiddle.net/kennx/SML4g/
善用.stop() http://api.jquery.com/stop/
#1 楼 @gsshcl stop() 我试过了有问题。你连续点击的时候,可能没到 animate 没有让 left 到 80px 就已经 stop()。例如你做一个幻灯片的话,你每次让每张图片偏移-=100px,当你连续点击的时候,stop() 可能会卡在 -50px 的时候。
#2 楼 @metal .stop() 有參數可以讓動畫直接跳到最後。 .stop( [clearQueue ] [, jumpToEnd ] ) $('div').stop(false, true).animate()就行了。
.stop( [clearQueue ] [, jumpToEnd ] )
$('div').stop(false, true).animate()
#3 楼 @gsshcl 贊!
在 stackoverflow 找到一個解答:http://stackoverflow.com/a/13710765/1008230
$('.forward').click(function() { if ($(".box").filter(':animated').length > 0) { return false; } $('.box').animate({left: '+=80px'}); });
是利用 :animated 判斷是否正在動畫 不知哪種做法較好?
:animated
试试 .one ?
.one
$('.forward').one('click', function(){ $('.box').animate({left: '+=80px'}); });
http://api.jquery.com/one/
#3 楼 @gsshcl 不行 连点就丢帧了 不过把第二个参数也改为 false 效果也不错 有些时候就是要这样的 #6 楼 @liluo 不行 只能点一次
#5 楼 @evanc3 效果拔群!