自定义动画animate

一个最简单的自定义动画
HTML：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <script src="js/jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                $("div").animate(
                        {
                            left: '250px'
                        }
                );

            })
        });
    </script>
    <style type="text/css">
        div {
            background: #98bf21;
            height: 100px;
            width: 100px;
            position: absolute;
        }


    </style>
</head>

<body>
<button>开始动画</button>
<p>绿块自动滑到中间</p>

<div>

</div>
</body>

</html>

result：

一个稍微复杂的自定义动画

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <script src="js/jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                $("div").animate(
                        {
                            left: '250px',
                            opacity: '0.5',
                            height: '150px',
                            width: '150px'
                        }
                );

            })
        });
    </script>
    <style type="text/css">
        div {
            background: #98bf21;
            height: 100px;
            width: 100px;
            position: absolute;
        }


    </style>
</head>

<body>
<button>开始动画</button>
<p>div从小到大，从左侧到居中</p>

<div>

</div>
</body>

</html>


result：

posted on 2016-05-25 16:55 Newbie_小白阅读(192) 评论(0) 收藏举报