实例中涉及到使用动画方法animate，动画停止方法Stop，
其中如果不是使用animate创建动画，使用stop方法无法停止队列中创建的动画。
其他详情在示例代码中都有注释。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画效果</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#begin").click(function () { for (var i = 0; i < 5; i++) { $("div").animate({ left: '250px', opacity: '0.5',//透明度 height: '150px', '150px' }, 'slow'); $("#sec").show('slow'); $("div").animate({ left: '0px', opacity: '1', height: '100px', '100px' }, 'slow'); $("#sec").hide('slow'); } }); //停止当前动画，跳入下一个动画 $("#stop").click(function () { $("div").stop(); }) //停止所有动画，保持当前状态 $("#stop1").click(function () { $("div").stop(true,false); }) //停止所有动画，跳到当前动画终点 $("#stop2").click(function () { $("div").stop(true, true); }) /* $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。 下面的例子演示 stop() 方法，不带参数： 实例 */ }); </script> </head> <body> <button id="begin">开始动画</button> <button id="stop">停止当前动画，进入下一个动画</button> <button id="stop1">瞬间停止</button><button id="stop2">停止所有动画，跳到当前动画终点</button> <p><a href="http://4welove.taobao.com">手机话费、Q币、游戏充值啊。。。老婆要求加的，无语中....</a></p> <div style="background:#98bf21;height:100px;100px;position:absolute;"> <p id="sec" style="display:none;"><a href="http://4welove.taobao.com">老婆要求加的，无语中....</a></p> </div> </body> </html>