自定义动画实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Mr_aswl/article/details/114645292

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义动画</title>
    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                //     $(".one").animate({
                //         width:500
                //     },1000,function(){
                //         alert("自定义动画执行完毕");
                //     });
                // });
                // $("button").eq(1).click(function(){

                // });
                // $("button").eq(2).click(function(){
                $(".one").animate({
                    // 接受一个对象 指定动画时长 指定动画节奏 动画执行完毕后的回调
                    marginLeft: 500
                }, 5000, function () {
                    alert("one自定义动画执行完毕");
                });
                $(".two").animate({
                    marginLeft: 500
                }, 5000,"linear", function () {
                    alert("two定义动画执行完毕");
                });
            });
            $("button").eq(1).click(function () {
                $(".one").animate({
                    width:"+=100"
                    // 在原属性的基础上进行累加
                },1000,function(){
                    alert("累加属性执行完毕");
                });
            });
            $("button").eq(2).click(function () {
                $(".one").animate({
                    // width:"hide"
                    width:"toggle"
                    //hide关键字隐藏 toggle切换
                    // 在原属性的基础上进行累加
                },1000,function(){
                    alert("关键字执行完毕");
                });
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: red;
        }

        .two {
            background: blue;
        }
    </style>
</head>

<body>
    <button>操作属性</button><button>累加属性</button><button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

jQery基础自定义动画