jQuery animate动画

发布于 2021-09-15  155 次阅读

通过改变元素的高度，对元素应用动画：

$("button").click(function(){
    $("#box").animate({height:"300px"});
});

定义和用法
animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

提示：请使用 "+=" 或 "-=" 来创建相对动画。

语法
(selector).animate({styles},speed,easing,callback)

参数

   styles   ==>  展开 / 收缩

   speed  ==>  展开 / 收缩

   easing  ==>  展开 / 收缩

   callback  ==>  展开 / 收缩

实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .cont {
            width: 100%;
            height: 200px;
            position: fixed;
            bottom: 0;
        }
        
        .a {
            width: 100%;
            height: 200px;
            background: #1e2939;
            text-align: center;
            position: absolute;
        }
        
        .a p {
            font-size: 50px;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translate(-50%);
            cursor: pointer
        }
        
        .b {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: -150px;
            background-color: aqua
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            let w = document.body.offsetWidth
            $('.a p').click(function() {
                $(this).parent().animate({
                    'left': -w + 'px'
                }, 3000, function() {
                    $('.b').animate({
                        'left': '0px'
                    }, 2000);
                });
            });
            $('.b').click(function() {
                $(this).animate({
                    'left': '-150px'
                }, 2000, function() {
                    $('.a').animate({
                        'left': '0'
                    }, 3000)
                })
            })

        });
    </script>
</head>

<body>
    <div class="cont">
        <div class="a">
            <p>&times;</p>
        </div>
        <div class="b">

        </div>
    </div>
</body>

</html>

实例.gif

小小孩子们