在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>
结果如下图所示: