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({ '1800px' }, 3000); }); $("#stop").click(function() { //停止当前正在运行的动画， '+=100px'可以停止 //停止当前正在运行的动画 '1800px'不能停止 $("div").stop(); }); $("#finish").click(function() { //停止当前正在运行的动画 '+=100px'可以停止 //停止当前正在运行的动画 '1800px'可以停止，并且停止在最后一帧 $("div").finish(); }); }); </script> </body> </html>
说明：
示例中stop()函数没有停止动画，为什么？