stop()函數直接停止動畫,finish()也會停止動畫同時所有排隊的動畫的CSS屬性跳轉到他們的最終值。 示例代碼: 說明: 示例中stop()函數沒有停止動畫,為什麼? ...
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()函數沒有停止動畫,為什麼?