jQuery animate() 自定义动画

作者: 马佳乐 | 来源:发表于2022-03-12 10:10 被阅读0次

JQuery动画，事件
jQuery 动画
jQuery - 效果（一）之动画
jQuery动画的easing插件Demo
jQuery 动画效果
2019-01-10 jQuery动画，jQuery循环，元素绝
jQuery 效果函数
20- jQuery中的动画
jQuery插件篇
jQuery动画、尺寸相关与滚动事件、jQuery事件、主动触发

语法：
animate(prop[, speed, easing, callback])；

参数1:必选的。对象代表的是需要做动画的属性
参数2:可选的。代表执行动画的时长
参数3:可选的。easing代表的是缓动还是匀速linear(匀速)、swing(缓动)。默认不写是缓动
参数4:可选的。动画执行完毕后的回调函数
代码练习：

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
            }
            
            #box2 {
                background-color: blue;
                margin-top: 150px;
            }
            
            #box3 {
                background-color: yellowgreen;
                margin-top: 300px;
            }
        </style>
    </head>

    <body>
        <input type="button" value="开始">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>

        <script src="js/jquery.js"></script>
        <script>
            $(function() {
                $("input").eq(0).click(function() {

                    //第一个参数：对象，里面可以传需要动画的样式
                    //第二个参数：speed 动画的执行时间
                    //第三个参数：动画的执行效果
                    //第四个参数：回调函数
                    $("#box1").animate({
                        left: 800
                    }, 8000);

                    //swing:秋千 摇摆
                    $("#box2").animate({
                        left: 800
                    }, 8000, "swing");

                    //linear:线性 匀速
                    $("#box3").animate({
                        left: 800
                    }, 8000, "linear", function() {
                        console.log("hahaha");
                    });
                })
            });
        </script>
    </body>

</html>