abstract:stop()的用法 stop()含有两个参数,stop(stopAll,goToEnd),stopAll为true时,停止所有动作;goToEnd为true时,瞬间完成动作;(1)默认stop(false,false),停止当前动画,队列中其他动画可以继续;(2)stop(false,true),瞬间完成当前动作,队列内其他动
stop()的用法
stop()含有两个参数,stop(stopAll,goToEnd),stopAll为true时,停止所有动作;goToEnd为true时,瞬间完成动作;
(1)默认stop(false,false),停止当前动画,队列中其他动画可以继续;
(2)stop(false,true),瞬间完成当前动作,队列内其他动作继续;
(3)stop(true,true),队列内所有动作全部瞬间完成。
(4)stop(true,false)是什么情况?stopAll所有都会停止,不会继续瞬间完成。
所谓队列
即一个事件内触发多个动画,即使操作的对象是相同的;
$('#btn10').click(function(){ $('#anm').animate({ width:'500px', height:'400px', left:'200px', top:'300px', opacity:0.4 },3000) $('#anm').animate({ fontSize:'40px', textIndent:'2em' },3000) }) //
同一个button的click事件写两次也是可以的,不会报错,且效果跟上面一样。
$('#btn10').click(function(){ $('#anm').animate({ width:'500px', height:'400px', left:'200px', top:'300px', opacity:0.4 },3000) }) $('#btn10').click(function(){ $('#anm').animate({ fontSize:'40px', textIndent:'2em' },3000) })
完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery动画</title> <script src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#btn10').click(function(){ //动作① $('#anm').animate({ width:'500px', height:'400px', left:'200px', top:'300px', opacity:0.4 },3000) //动作② $('#anm').animate({ fontSize:'40px', textIndent:'2em' },3000) }) //停止 $('#btn11').click(function(){ $('div').stop(false,true) }) }) </script> </head> <body> <button type="button" id="btn10">animate</button> <button type="button" id="btn11">stop</button> <div id="anm" style="height: 60px; width: 300px; background-color: darkseagreen; position: absolute;"> <p>文字放大</p> </div> </body> </html>
END
Correcting teacher:灭绝师太Correction time:2018-11-13 09:14:43
Teacher's summary:总结的很全面,理解的比较透彻,继续加油奥