jQuery学习笔记——自定义动画animate（）详细举例

效果：点击按钮，正方体从左left=0移动到left=800，高度不断增加

到达800后缩小返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .wrapper{
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }

        ul{
            list-style: none;
        }
        #div1{
            width: 200px;
            height: 200px;
            position: relative;
            left: 0;
            background-color: cornflowerblue;

        }

        




    </style>
    <script src="jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('#div1').animate({
                    left:800,
                    height:800
                },2000,'swing',function(){
                    $('#div1').animate({
                        left:0,
                        height:200
                    },3000,'linear')});
            });
        });
    </script>
</head>
<body>

    <input type="button" value="从左到右800" id="btn">
    <div id="div1"></div>

</body>
</html>

主要运用到自定义动画 animate()属性

animate()有四个参数：

参数一：对象--代表的是做动画的属性（必选）

参数二：时长--动画时长

参数三：easing--代表执行效果，默认为swing（缓动）可以是linear（匀速）

参数四：callback—代表动画执行完毕后的回调函数

总结：

参数四回调函数给了自定义动画animate()无限的可能

可以通过回调函数实现许多动画效果

jQuery学习笔记——自定义动画animate（）详细举例

猜你喜欢