jQuery中animate运行原理

最新推荐文章于 2021-03-22 20:01:13 发布

weixin_45846357

最新推荐文章于 2021-03-22 20:01:13 发布

阅读量991

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45846357/article/details/106321542

版权

本文深入探讨了jQuery中animate函数的工作机制，从animate的使用方式开始，解析了其内部如何将运动效果转化为配置项。通过分析genFx函数，揭示了animate如何处理width、height等属性，并通过示例说明了JQuery内部的实际调用过程。

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

在看源码之前我们先看一些小的运动效果

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>

<body>

    <input type="button" value="点击" id="btn">
    <div id="div1"></div>

    <script src="jquery-1.11.3.js"></script>
    <script>

        $(function () {
            $('#btn').click(function () {
                $('#div1').toggle( 500 );　　// 改变宽高 透明度

                // $('#div1').slideToggle(500);　//上下滑动

                // $('#div1').fadeToggle(500); //淡入淡出


            });;
        });

    </script>
</body>

</html>

但这些方法的底层，其实调用的是animate，我们看看animate的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
    #div1{ width: 300px; height: 300px; background: red;}

    </style>
</head>
<body>
    
    <input type="button" value="点击" id="btn">
    <div id="div1"></div>

    <script src="jquery-1.11.3.js"></script>
    <script>

        $(function(){
            $('#btn').click(function() {

                // 通常animate带4个参数 
                // 1、要改变的对象名
                // 2、运动所用的时间
                // 3、运动形式 默认是缓冲swing，匀速是linear 一般只有2种方法 ，可扩展
                // 4、回调函数
                
                $('#div1').animate({ width: 500 }, 1000, 'swing', function(){
                    alert(1);
                });

　　　　　　　　　// $('#div1').animate({ width: 'toggle' }, 1000);  其实还能这么写！
            });;
        });

    </script>
</body>
</html>

不过，在JQuery源码内部，这种写法其实被转成了这样

$(function(){
            $('#btn').click(function() {

                $('#div1').animate({ width: 500 }, {
                    duration : 500,
                    easing : 'swing',
                    complete : function(){
                        alert(1);
                    }
                });

　　　　　　　// 这种写法也叫配置写法，好处是不用担心少传参数，也不用担心参数顺序
            });;
        });

在JQuery源码中， optall做了这件事，他把运动转成了配置写法
在这里插入图片描述
好，那接下来我们先分析第一个参数，animate第一个参数是一个对象，这个对象可以接收width，height，opacity这样的值，