<!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时,会直接跳转到动画的结束位置。