stop()函数直接停止动画，finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值。
示例代码：
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery停止动画finish和stop函数区别</title>
<style type="text/css">
div {
border: 1px solid green;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
"></script>
</head>
<body>
<button type="button" id="start">start</button>
<button type="button" id="start">stop</button>
<button type="button" id="finish">finish</button>
<div class="">
动画
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#start").click(function() {
$("div").animate({
width: '1800px'
}, 3000);
});
$("#stop").click(function() {
//停止当前正在运行的动画， width: ' =100px'可以停止
//停止当前正在运行的动画 width: '1800px'不能停止
$("div").stop();
});
$("#finish").click(function() {
//停止当前正在运行的动画 width: ' =100px'可以停止
//停止当前正在运行的动画 width: '1800px'可以停止，并且停止在最后一帧
$("div").finish();
});
});
</script>
</body>
</html>说明：
示例中stop()函数没有停止动画，为什么？
更多专业前端知识，请上 【猿2048】www.mk2048.com
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
