<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script> <script> $(document).ready(function(){ $(".start").click(function(){ $("div").animate({width:‘100px‘},3000); $("div").animate({fontSize:‘3em‘},3000); }); $(".stop1").click(function(){ $("div").stop();//仅仅停止第一个动作 }); $(".stop2").click(function(){ $("div").stop(true);//真的停止了所有的动作 }); $(".stop3").click(function(){ $("div").stop(true,true);//真的停止了所有的动作并且真的一瞬间完成了第一个的动作 }); }) </script> <title>jQuery三种动画停止</title> <style type="text/css"> #panel { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; padding:50px; } </style> </head> <body> <button class="start">开始</button> <button class="stop1">停止</button> <button class="stop2">停止所有</button> <button class="stop3">停止所有并完成</button> <div id="panel">Hello world!</div> </body> </html>