动画停止和延时

　　在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>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="javascript:void(0)">停止</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="javascript:void(0)">延时</a>
        </div>
        <div class="divContent">
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

结果如下图所示：

高否？富否？帅否？否？滚去学习！