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

時間 2019-11-17

標籤 jquery 源碼分析運動 animate 基本原理欄目 JQuery 简体版

原文原文鏈接

本文基於JQuery2.0.3版本，下載地址 http://pan.baidu.com/s/1hrH1jnehtml

在看源碼以前咱們先看一些小的運動效果jquery

<!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的使用方法ide

<!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個參數 
                // 一、要改變的對象名
                // 二、運動所用的時間
                // 三、運動形式 默認是緩衝swing，勻速是linear 通常只有2種方法 ，可擴展
                // 四、回調函數
                
                $('#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作了這件事，他把運動轉成了配置寫法spa