以梦为马，不负韶华。

导航

jquery自定义动画 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button id="kaishi">开始</button>
        <button id="jieshu">结束</button>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function(){
            // $('button').click(function(){
            //     $('#box').animate({"marginLeft":1000},2000,function(){
            //         $(this).animate({'marginTop':200},500)
            //     })
            // })
            $('#kaishi').click(function(){
                $('#box').animate({"marginLeft":1000},2000)
                $('#box').animate({'marginTop':200},500)
                $('#box').delay(3000).animate({'marginLeft':0},1000)    //delay(3000)延迟，隔多少秒后执行
            })
            $('#jieshu').click(function(){
                // $('#box').stop(true)    //清空动画队列
                // $('#box').stop()    //结束，默认为false
                // $('#box').stop(true,true)    //完成当前动画，把后面动画清空
                $('#box').stop(false,true)    //当前动画到最后一个状态，继续执行下面所有动画
            })
        })
    </script>
</html>

 

posted on 2020-05-14 16:28  小冉哥、  阅读(165)  评论(0)    收藏  举报