jquery-delay(),queue()

    <style>
        div{
             100px;
            height: 100px;
        }
        .div1{background: red;display: none;}
        .div2{background: yellow}
        .div3{background: blue}
        .div4{background: purple}
        .div5{background: pink}
    </style>
    <p></p>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <script>
        $(".div1").hover();
        $(".div2").slideDown();
        $(".div3").fadeIn();
        $(".div4").fadeOut().delay(1000).fadeIn(1000);
        $(".div5").fadeOut().delay(1200).fadeIn(1000);
        // delay()方法可以延迟队列，先执行完fadeOut之后，等待1200ms之后才可以执行下一个动画,只能用在动画中

        $(".div2").click(function(){
            function showIt(){
                $(".div1").fadeIn(2000);
                $(".div1").slideDown(2000);
                $(".div1").slideUp(2000);
                $(".div1").fadeOut(2000,showIt);
            }
                function showab(){
                    // var n =$(".div1").queue("fx");
                    // 也可以传递一个匿名函数,或则可以在匿名函数中传入一个函数名
                    // 注意使用.queue()添加一个函数，应保证最后的时候$(this).dequeue(),这样能让队列中的其他函数按顺序执行
                    $(".div1").queue("fx",function(nextFun){
                        alert("ok ,that is all!");
                        $(".div1").dequeue();
                        // nextFun();
                    })
            $("p").text(n.length)
            setTimeout(showIt,1000)
                }
            showIt();
            showab();
        });
        $(".div3").click(function(){
            $(".div2").slideDown(1000).fadeIn(1000).fadeOut(1000).slideUp(1000);
            $(".div2").queue(function(){
                alert("div2 is over!");
            })
        })

    </script>