码迷,mamicode.com
首页 > Web开发 > 详细

jQuery动画之自定义动画

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

标签:时长   idt   html   css   selector   自定义动画   function   char   fun   

语法

$(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动画之自定义动画

标签:时长   idt   html   css   selector   自定义动画   function   char   fun   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!