1.测试代码
<!doctype html>
<html>
<head lang='en'>
<meta charset='utf-8'></meta>
<style>
#animater{
150px;
background:;
border: 1px solid black;
/*为了移动，需设置此属性*/
position: relative;
}
</style>
</head>
<body>
<div id="animater">
stop()方法测试
</div>
<div id="button">
<input type="button" id="button1" value="stop()"/>
<input type="button" id="button2" value="stop(true)"/>
<input type="button" id="button3" value="stop(false,true)"/>
<input type="button" id="button4" value="stop(true,true)"/>
</div>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
// 为了看效果，随意写的动画
$('#animater').animate({
'right':-800
}, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');
// 点击不同的button执行不同的操作
$('#button1').click(function(){
//默认参数是false，不管写一个false还是两个false还是没写false效果一样
$('#animater').stop();
});
$('#button2').click(function(){
//第二个参数默认false
$('#animater').stop(true);
});
$('#button3').click(function(){
$('#animater').stop(false,true);
});
$('#button4').click(function(){
$('#animater').stop(true,true);
});
</script>
</body>
</html>
2.截图：试点击这四个按钮测试，stop()在不同参数下的性能：
3.结果：
stop():的默认值是stop(false,false),第一个animate停止，接下来的其他animate都依次执行；
stop(true):第一个animate停止，接下来的其他animate都停止；
stop(false,true):第一个animate跳到最终结果，接下来的animate继续依次执行，最后停止在第一个animate起跳之前的状态；
stop(true,true):第一个animate跳到最终结果，接下来的其他animate都停止；