首页 > Web开发 > 详细

jQuery动画之自定义动画

时间:2018-08-25 16:08:41      阅读:280      评论:0      收藏:0      [点我收藏+]

语法

$(selector).animate({params}, speed, callback);

参数:

  • params: 必选,要执行动画的CSS属性。
  • speed: 可选,执行动画时长。
  • callback: 可选,动画执行完成后,立即执行的回调函数。

作用:

执行一组CSS属性的自定义动画

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画之自定义动画</title>
    <style type="text/css">
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(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("动画执行完毕!");
                    });
                });


            });
        })
    </script>
</head>
<body>
    <button>自定义动画</button>
    <div></div>
</body>
</html>

jQuery动画之自定义动画

原文:https://www.cnblogs.com/yang-wei/p/9534264.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!