jQuery stop() 一点笔记

jQuery 有个 stop() 能够停止动画队列。例如:

1
2
3
4
5
<div class="wrap">
<input type="button" value="运动" id="btn1">
<input type="button" value="停止" id="btn2">
<div id="div1"></div>
</div>

1
2
3
4
5
6
7
8
9
#div1{
width: 100px;
height: 100px;
background-color: #ccc;
}

.wrap{
width: 500px;
margin: 100px auto;
}

1
2
3
4
5
6
7
8
9
$('#btn1').on('click',function (){
$('#div1').animate({width: '200'},1000).animate({height: '500'},1000);
});
$('#btn2').on('click',function (){
// $('#div1').stop(); //停止当前队列,即第一个animate
// $('#div1').stop(true); //停止所有队列
// $('#div1').stop(true,true); //停止当前队列,即第一个animate,并直接运动到目标点
$('#div1').finish(); //停止所有队列,并直接运动到目标点
});

stop() 还有清空队列的行为