JQuery源码分析 --- 运动animate 基本原理

Posted 2020-07-15 __枫伊飘渺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery源码分析 --- 运动animate 基本原理相关的知识，希望对你有一定的参考价值。

本文基于JQuery2.0.3版本，下载地址 http://pan.baidu.com/s/1hrH1jne

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

<!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-2.0.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-2.0.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源码的8341行， optall做了这件事，他把运动转成了配置写法