<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .box{ 200px; height: 200px; margin: 200px 400px; position: absolute; background-color: #330000; border: 1px solid #222222; } </style> <body> <div class="box"> </div> <button id="btn">stop</button> <button id="btn2">begin</button> </body> <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script src="js/haroldjs.js" type="text/javascript" charset="utf-8"></script> </html>
$().ready(function(){ $('#btn').on('click',function(){ $('.box').stop(false,true); }); $('#btn2').on('click',function(){ $('.box').animate({ left : '350px', top : '350px' },4000); }); });
其中,animate()方法,初级使用中,一般只会用到前两个参数,CSS属性和速度。callback方法还不熟练,暂时不会应用,过后再写。
其中stop()方法,其中两个参数,分别接受布尔值。
stop(stopAll.gotoEnd);
第一个参数为true时,会清除掉队列的所有等待元素,并且停止动画到当前运动位置。
第二个参数为true时,会直接跳转到动画的结束位置。