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

最新推荐文章于 2025-06-16 14:11:27 发布

Ankry果冻

最新推荐文章于 2025-06-16 14:11:27 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_41306215/article/details/105761282

JQuery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery的animate方法实现一个正方体从left=0平移到left=800并逐渐增大高度，之后再缩小返回的效果。文章强调了animate的四个参数，包括动画属性、时长、执行效果和回调函数，并指出回调函数为实现复杂动画提供了可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：点击按钮，正方体从左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()无限的可能

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