JQuery源碼分析 --- 運動animate 基本原理

本文轉載自查看原文 2016-05-28 15:27 6174 JQuery源碼分析

本文基於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做了這件事，他把運動轉成了配置寫法