jquery动画之自定义动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
//                var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
//                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//
//                //自定义动画
//                $("div").animate(json,1000, function () {
//                    $("div").animate(json2,1000, function () {
//                        alert("动画执行完毕!");
//                    });
//                });


//                //自定义动画
//                $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
//                $("div").animate({"height":0},2000);
//                $("div").animate({"opacity":0},2000);

            })
        })
    </script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34272315/article/details/78942195