在jQuery中，通过animate()可以实现元素的动画显示，但在显示的过程中，必然要考虑各种客观因素和限制性条件的存在，因此，在执行动画时，可通过stop()方法停止或delay()方法延时某个动画的执行。stop()与delay()方法的语法调用格式介绍如下。
stop()方法的格式如下：
stop([clearQueue],[gotoEnd])
该方法的功能是停止所选元素中正在执行的动画，其中可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画，另外一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。
delay()方法的格式如下：
delay(duration,[queueName])
该方法的功能是设置一个延时值来推迟后续列队中动画的执行，其中参数duration为延时的时间值，单位是毫秒。可选参数[queueName]表示队列名称，即动画队列。
（1）功能描述：
在页面中，设置三个超级链接，分别为“开始”、“停止”、“延时”，单机“开始”后，页面中的色块以“拉窗帘”的方式动画切换显示状态；单机“停止”后，立刻停止了正在执行中的动画效果；单机“延时”后，动画切换显示效果在延时2000毫秒后，再执行。
（2）实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> body{font-size: 13px;} .divFrame{border: solid 1px #666;width: 233px;text-align: center;} .divFrame .divTitle{background-color: #eee;padding: 5px 0;} .divFrame .divContent{padding: 5px 0;} .divFrame .divContent .box{width: 97px;height: 97px;border: solid 1px #eee;padding: 2px;background-color: orange;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script> $(function(){ $("a:eq(0)").click(function(){ $(".box").slideToggle(3000);//“拉窗帘”方式切换色块 }); $("a:eq(1)").click(function(){ $(".box").stop(); //停止正在执行的动画 }); $("a:eq(2)").click(function(){ $(".box") //延时切换色块 .delay(2000) .slideToggle(3000); }); }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <a href="javascript:void(0)">开始</a> | <a href="javascript:void(0)">停止</a> | <a href="javascript:void(0)">延时</a> </div> <div class="divContent"> <div class="box"></div> </div> </div> </body> </html>
结果如下图所示：
