摘要：之前是一個全局變量，如果不獨立，頁面只有一個定時器在運作。這時的判斷條件應該是目標距離與盒子目前距離之間差的絕對值大于等于一步距離絕對值的時候，讓他們執行否則的話清除清除定時器，并將最后的距離直接設置為的距離。

經過前面幾篇文章的講解，相信大家已經會操作DOM和BOM了。為什么前面要花那么多精力去講DOM呢？因為在后面的學習、工作中，會大量的使用DOM操作，一個表格需要增、刪、改、查，一個圖片需要改變大小..等，如果你想要動態的改變這些，必須要學會使用DOM。

為了鞏固前面的知識點，并且能夠熟練地使用它們，這里多帶帶寫了一篇《JavaScript 進階知識 - 特效篇》。本篇文章作為進階篇很重要，不單單是對前面知識點的運用，期間也會有大量的新知識點注入，所以希望小伙伴們繼續加油，認真閱讀。

在本篇文章中主要會講解一些案例，比如我們平時在頁面中碰到的一些特效，一些動畫效果。

注意： 所有的案例都在這里鏈接: 提取密碼密碼: 70ny，文章中的每個案例后面都有對應的序號。

offset系列用于用于獲取元素自身的大小和位置，在網頁特效中有廣泛應用。offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop。

offsetWidth 和 offsetHeight獲取的是元素的真實寬高

獲取的是元素真實的高度和寬度

獲取到的是數值類型，方便計算

offsetHeight與offsetWidth是只讀屬性，不能設置。

示例代碼：獲取一個盒子的真實寬高 [01-offset系列-offsetWidth&Height.html]

offsetWidth是一個通過計算后得到的值， padding + border + width

思考： 之前我們不是也可以通過style來獲取樣式嗎？他們有什么不同

style.height與style.width只能獲取到行內樣式里的width和height

獲取的是字符串類型，還需要轉換成數值類型

寫在css樣式里的寬高是獲取不到的，只能獲取行內樣式

總結：

設置寬度高度使用style.width與style.height

獲取寬度和高度offsetWidth與offsetHeight

offset獲取的寬高包括padding、border

parentNode和offsetParent

parentNode始終是父元素

offsetParent是離當前元素最近的定位元素(absolute、relative)，如果沒有，那就找body

示例代碼： [02-offset系列-offsetParent.html]

offsetLeft: 自身左側到offsetParent左側的距離：left + margin
offsetTop: 自身頂部到offsetParent頂部的距離 : top + margin

元素自身與offsetParent真實的距離

獲取到的是數值類型，方便計算

只讀屬性，只能獲取，不能設置

示例代碼：獲取一個盒子距父盒子的距離 [03-offset系列-offsetTop&Left.html]

思考： 之前我們不是也可以通過style來獲取樣式嗎？他們有什么不同

style.top與style.left只能獲取到行內樣式里的top和left

獲取的是字符串類型，還需要轉換成數值類型

寫在css樣式里的寬高是獲取不到的，只能獲取行內樣式

總結：

設置定位left/top使用style.left與style.top

獲取定位left/top使用offsetLeft與offsetTop

offset獲取的位置包括margin

如果父元素沒有定位，獲取的就是相對body的

一張圖看清offset系列

如何讓一個物體動起來？動畫函數的實現原理其實就是利用間歇定時器每隔一段時間執行一次的原理實現的。

1、讓一個物體動起來

點擊按鈕讓一個盒子勻速往右執行一段距離：[04-勻速動畫初體驗(一).html]

奔跑吧

效果圖：

BUG： 不知道細心的小伙伴有沒有發現兩個問題

現在執行的時候是不會停下來的，一直往右跑

點擊按鈕之后再去點擊，會發現，按鈕點擊次數越多，盒子速度越快

2、讓一個物體動起來，解決bug

我們讓盒子運動到500px的位置停下來 [05-勻速動畫初體驗(二).html]

var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
/**
    為什么會越點越快？
    點擊一次就會調用一次定時器，點擊的次數越多，調用的就越多
    距離疊加的就會越來越大 視覺效果上看起來就跑的越來越快
    只要在每次點擊后，定時器執行前清除上一次定時器，就不會出現越點越快的效果了
*/
btn.onclick = function() {
    // 一進來就清除定時器
    clearInterval(timer);
    timer = setInterval(function() {
        // 定義一個距離 相當于每一次要跑的距離 step
        var step = 5;
        // 定義一個當前位置 leader
        var leader = box.offsetLeft;
        /**
            當移動的位置在500px內的時候，執行動畫函數
            否則就清除定時器，讓盒子停下來
        */
        if (leader < 500) {
            // 每次執行的時候 讓leader都走step距離
            leader = leader + step;
            // 將距離賦值給box
            box.style.left = leader + "px";
        } else {
            clearInterval(timer);
        }
    }, 15);
}

效果圖：

總結：

setInterval間歇定時器，如果不手動清除，它就會一直運行下去

點擊事件觸發定時器一定要注意，一進來就清除一次，否則會越點越快

函數需要獨立，就不能使用全局變量。timer之前是一個全局變量，如果不獨立，頁面只有一個定時器在運作。封裝的函數里將timer綁定給調用定時器的元素，這樣就獨立了。

1、封裝一個動畫函數 [06-封裝一個勻速動畫函數.html]

奔跑吧,500
奔跑吧,1000

注意： 上面的案例我們只是簡單的實現了一個動畫的封裝效果，但是作為一個以后會經常用的函數，上面的代碼還有很多需要優化的地方

1、上面的函數只能往正方向跑，也就是說去到1000，想讓它回到500是不好實現的；

2、如果每次走的距離是5，目標距離是500，正好能整除。假如每次走的是9呢？每次走9，是不能被500整除的，所以最后停下里的距離會偏多一點。

2、封裝一個動畫函數完整版 [07-封裝一個勻速動畫函數完整版.html]

先說說第二個問題，距離的問題。如果走的距離不能被目標距離整除的話，最后會多出來一點距離，我們可以不用管這個距離，直接在清除定時器，停下里的時候讓它的距離等于目標距離。

clearInterval(element.timer);        // 清除前位置在504，直接在下面設置讓它位置等于500
element.style.left = target + "px";  // 500

現在說說第一個問題，盒子到1000的時候不能回到500。假設現在盒子在1000，我們點擊按鈕1的時候想要讓他回到500，這個時候我們可以發現時的leader = 1000，目標距離target為500，就是說當leader>target的時候，盒子是可以往回走的,這時候只要將步數設置為負數 ，盒子就是往回跑的。

var leader = element.offsetLeft;
// 當目標距離大于當前位置 說明往正方向走 step的值就是正的
var step = target > leader? 9 : -9;

此時就不能再根據 if (leader < target){}, else { clearInterval(element.timer); }去判斷，讓盒子運動了。這時的判斷條件應該是目標距離target 與盒子目前距離leader之間差的絕對值大于等于一步距離step絕對值的時候，讓他們執行leader = leader + step;否則的話清除清除定時器，并將最后的距離直接設置為target的距離。

var distance = Math.abs(target - leader);
// 通過判斷此時的差如果大于或者等于一步的距離step的時候，就應該執行動畫
if (distance >= Math.abs(step)) {
    leader = leader + step;
    element.style.left = leader + "px";
}

完整代碼：

奔跑吧,500
奔跑吧,1000

效果圖：

如上，這就是封裝的一個完美的動畫函數了，下次有需要用到動畫的地方，直接引用即可——[ js/animate.js ]

基本上每個網站都會用到輪播圖，輪播圖的使用可以說是必不可少的。以后我們用的最多的可能是插件，原生的可能并不常用，但是輪播圖的原理我們必須知道，并且能夠寫出來。(之前一次面試就是讓我講出輪播圖的具體實現步驟)

現在我們先來學習下簡單的輪播圖實現原理。

輪播圖樣式的特點：

ul要足夠的寬，要求能夠一行放下所有的li

父盒子的寬高和圖片的寬高一樣

父盒子要有一個overflow:hidden ,僅顯示一張圖片，不多不少

要求ul很寬很寬，因為所有的li要左浮動，要保證所有的li在一行上顯示，定義一個盒子，盒子的寬高要和顯示的單張圖片寬高一樣，然后設置overflow:hidden這樣其他的li就會被隱藏在下面，通過改變ul的位置就能實現圖片的切換了

示例代碼： [08-實現簡單的輪播圖.html]

效果圖：

從上面效果圖中，我們可以看到，一個最簡單的輪播圖已經成型了，但是需要去用手點擊，而且如果跨點數去點擊，會發現圖片要一張張滑過去，這里后面我們會優化。

左右焦點輪播圖，就是在顯示圖片的兩端添加兩個按鈕，一個向左，一個向右，點擊的時候圖片會根據點擊的方向滑動。并且當鼠標懸停在顯示區域的時候，兩個按鈕顯示。鼠標離開顯示區域，，兩個按鈕隱藏。

示例代碼： [09-左右焦點輪播圖.html]

    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
    

    

        <
        >
    

效果圖：

上圖可以看到，當滑到最左邊或者最右邊的時候，再點擊就沒有用了，正常的輪播圖肯定不是這樣的，點擊到最后一張后再點擊肯定是接著滑動的。下面我們接著看，如何實現一個無縫輪播圖

示例代碼：無縫輪播(可以一直點擊) [10-左右焦點輪播圖-無縫滾動.html]

何謂無縫滾動？

無縫滾動就是圖片能夠循環切換，就算是最后一張，點擊之后也會跳到第一張

原理：

效果就像上面所說的一樣，主要實現原理就是，在最后面一張圖片，再加上一張圖片，這張圖片就是第一張圖片

當滑動到最后一張圖片的時候(看下圖)，此時的視覺效果就是停在第一張圖片上

這時只需要在程序上判斷，當在最后一張的時候，直接跳到第一張圖片即可

示例代碼：無縫滾動的簡單原理 [10-無縫滾動原理.html]

效果圖：

左右焦點無縫輪播圖： [11-左右焦點無縫輪播圖.html]

    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        
        

            
        
    

    

        <
        >
    

效果圖：

前面我們已經可以通過點擊對應的小點、左右焦點和無縫滾動來實現輪播圖了，不過都是多帶帶分開來的，現在我們做個整合，實現一個完整的輪播圖。

功能概述：

簡單輪播功能

給circle下的所有的li注冊點擊事件

排他

移動Ul

左右焦點功能

需要定義一個變量count來記錄移動的圖片的張數。

點擊右箭頭功能

如果當前圖片是最后一張（假圖片），需要瞬間變成真圖片

點擊一次，需要讓圖片往右移動一張

同步小圓點，干掉所有小圓點，復活對應count的小圓點。

最后一張假圖片對應的小圓點是第一個，需要做特殊處理

點擊左箭頭的功能和右箭頭基本一致。

自動輪播的功能

開啟定時器，每隔兩秒點擊一次右箭頭

鼠標經過盒子，停止定時器(箭頭亂閃的問題解釋)觸發事件的一定要是外面的大盒子，不能是ul，如果給ul注冊事件，就會出現亂閃的問題

鼠標離開盒子，開啟定時器

同步功能

點擊小圓點時需要同步

淘寶bug解決方法(當一圈過后回到第一個小圓點的時候，再點擊它會發現他會再跑一圈)

淘寶bug圖：

完整代碼： [12-完整版輪播圖.html]

    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
    
    
    

        <
        >
    
    
    

        

        

        

        

        

    

效果圖：

完美了嗎？并沒有，這里有個小bug：

可能會有小伙伴不理解，有問題你上面直接講一下不就得了，還特地賣關子在下面重新寫一遍。我想跟大家說的一點就是，如果在上面我直接告訴你這里有個問題有個bug的話，你一眼看過，可能都不當回事，我在這里拿出來講一下，相信這個知識點你會記得更深。

小bug：明明設置的是600，怎么會是596.4px呢？

原因：

offsetLeft獲取值的時候，只會獲取整數，會對小數部分會四舍五入處理，比如step = (target - leader)/10當step的值出現小數的時候，leader+= step之后，offsetLeft在獲取leader位置的時候就會把小數部分四舍五入，這樣就會造成最后距離的誤差。

解決方法：

對step向上取整處理(Math.ceil())，保證每一次都至少跑1px的距離,只要不出現小數offsetLeft就不會出現四舍五入。

完整代碼： [14-緩動動畫初體驗(二).html]

var box = document.getElementById("box");
var btn = document.getElementById("btn");
var timer = null;

btn.onclick = function() {
    clearInterval(timer);
    timer = setInterval(function() {
        // 定義一個目標距離
        var target = 600;
        // 獲得當前盒子的位置
        var leader = box.offsetLeft;
        // 每次運動的距離
        var step = (target - leader) / 10;
        // 對step進行向上取整
        step = Math.ceil(step);
        // leader = leader + step  動起來
        leader += step;
        // 將距離給盒子
        box.style.left = leader + "px";
        // 當當前距離等于目標距離的時候清除定時器
        if (leader == target) {
            clearInterval(timer);
        }
    }, 15);
}

前面勻速動畫那里已經講過封裝一個函數的好處與重要性，現在我們將緩動動畫也封裝成一個函數。

示例代碼： [15-緩動動畫函數封裝.html]

效果圖：

又到了找bug的時候了：

上面的代碼從0-500，從500-1000都沒有問題，經過向上取整后都能到達目標距離：500和1000。但是小伙伴可以看下，當從1000回到500的時候，是正好回到500的嗎？答案肯定不是的，為什么呢？

step為正數的時候，向上取整是完全沒有問題的，但是當從1000到500的時候，step就是負數了，負數向上取整后就會變得更大，比如原本是-33.3，向上取整后就是-33了，-0.3就會舍去，所有就不會到500的位置。

解決方法： 判斷step的正負，為正的時候，向上取整。為負的時候，向下取整。

緩動函數封裝完整版： [16-緩動動畫函數封裝完整版.html]

function slowAnimate(element, target, num) {
    // 一進來就要清除定時器，防止越點越快
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        // 獲得元素當前位置
        var leader = element.offsetLeft;
        // 定義每次運動的距離
        var step = (target - leader) / num;
        //如果step是正數，對step向上取整，
        //如果step是負數，對step向下取整
        // 保證每一次最少都走1px
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader += step;
        // 設置元素的位置
        element.style.left = leader + "px";
        // 當元素的位置 等于 目標位置的時候 清除定時器
        if (leader == target) {
            clearInterval(element.timer);
        }
    }, 15);
};

獲取元素計算后的樣式指的是元素經過層疊后真正生效的樣式，不管樣式寫在哪，計算后的樣式指的就是最終的樣式。

通過style只能獲取到寫在行內的樣式，那么想要獲取其他的樣式怎么辦呢？

js提供了一個方法：window.getComputedStyle(element, null)[attr];，它返回的是一個對象CSSStyleDeclaration，[attr]就是這個對象里面就是計算后的所有的樣式的屬性名(關聯數組取對象的值)。element指的是當前參數，null

這里可以不用深究-官方解釋。這個方法需要window調用。

/**
    element ：獲取樣式的當前元素
    null    ：這里可以傳一個偽元素，如果不是偽元素的話必須是null
    attr    ：后面可以寫具體的屬性，比如boderRadius  就會獲取這個元素的border-radius樣式信息
*/
window.getComputedStyle(element,null)[attr];

示例代碼： [17-獲取元素計算后的樣式.html]

效果圖：

兼容性處理：

window.getComputedStyle(element, null)[attr];只適用于現代瀏覽器中

IE678有自己的方法：element.currentStyle[attr];

// 獲取元素計算后的樣式
function getStyle(element,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(element, null)[attr];
    }else{
        return element.currentStyle[attr];
    }
}

// 注意：調用函數的時候 獲取的屬性名是一個字符串
alert(getStyle(box, "width"));

[18-獲取元素計算后的樣式兼容性處理.html]

注意： 上面的封裝函數中，調用的時候，屬性名是一個字符串類型。

不管是上面的勻速動畫函數，還是這里的緩動動畫函數，都只能左右運動，但是一個真正完整的動畫函數，只改變左右位置肯定是不夠的，我們可能需要改變它的寬高等。在上面一節中，我們知道了如何獲取到元素計算后的樣式，而且只要是元素有的樣式都能獲取到，有了這個方法我們就可以讓動畫去執行更多的事情了。

1、對獲取到的樣式返回值進行處理：

在上面的一節中，我們可以看到，獲取的返回值都是字符串格式，比如獲取寬度的時候，返回的是一個"300px"的字符串，因為緩動動畫函數里面是需要計算的，這里是個字符串肯定不行，所以我們需要對其進行parseInt取整處理。

[19-緩動動畫修改多個樣式-處理返回值.html]：

function getStyle(element, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, null)[attr];
    } else {
        return element.currentStyle[attr];
    }
}

function animate(element, attr, target) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        // getStyle 返回的是樣式屬性的值 我們用一個變量將它儲存起來
        var leader = getStyle(element, attr);
    
        // 因為返回值是一個字符串，并且帶有字符px，所以我們對返回值進行取整轉換
        leader = parseInt(leader) || 0;  // 這里或 0的目的就是，當parseInt取整失敗的話，給一個默認值0
        
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader += step;
    
        // 設置指定樣式
        element.style[attr] = leader + "px";
    
        if (leader == target) {
            clearInterval(element.timer);
        }
    }, 15);
}

animate(box, "left", 800);

上面的代碼我們對它的返回值進行了處理，而且還可以對它設置其他的樣式，只要單位是px的屬性都可以設置。但是這里每次還是只能設置一個樣式，下面我們來實現修改多個樣式。

注意： leader = parseInt(leader) || 0; "或"上0的目的就是：當有些屬性設置的值不是數字的時候，比如：auto，這時候parseInt轉換的結果是NaN。當"或"上0之后，轉換失敗后，leader，就會默認是0。

2、遍歷一個對象：

讓我們來復習一下，js基礎的時候，我們接觸到了對象，并且知道了可以用for..in的方法來遍歷對象。我們知道getComputedStyle方法，獲取計算后樣式的時候，返回的是一個名叫CSSStyleDeclaration的對象，這個對象里面是所有的樣式屬性，我們想要對這些屬性進行多個操作的時候，就可以通過遍歷的方法。

for(k in obj){
    // k    ：就是相當于對象的鍵
    // obj  ：就是需要遍歷的對象
}

3、同時修改多個樣式：

同時修改多個樣式，就是將要修改的多個屬性以對象的形式作為參數傳進函數中。

[20-緩動動畫修改多個樣式.html]

var box = document.getElementById("box");
var btn = document.getElementById("btn");

// 封裝一個函數，element 表示執行動畫的元素  obj傳的是一個對象，里面可以設置多個屬性和值
function animate(element, obj) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        // 遍歷外部傳進來的對象
        for (k in obj) {
            //attr   :  要做動畫的樣式
            //target :  目標值
            var attr = k;
            var target = obj[k];
            // 獲取元素開始時計算后的樣式
            var leader = getStyle(element, attr);
            leader = parseInt(leader) || 0;
            // 緩動動畫函數原理
            var step = (target - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader += step;

            // 給元素設置以樣式屬性名為attr的值  
            // 這個封裝的動畫函數只能改值是px單位的樣式
            element.style[attr] = leader + "px";
            if (leader == target) {
                clearInterval(element.timer);
            }
        }
    }, 15);
}

// 處理兼容性
function getStyle(element, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, null)[attr];
    } else {
        return element.currentStyle[attr];
    }
}
// 調用函數 設置了五個樣式屬性
btn.onclick = function() {
    animate(box, {
        width: 200,
        height: 200,
        left: 300,
        top: 300,
        // bprder-radius 應該轉為駝峰命名法 并且值只能是100px的格式  不能是百分比
        borderRadius: 100
    });
}

效果圖：

通過上面封裝的函數我們可以改變多個樣式，但是效果圖中我們可以看到一個問題，就是當到達設定值后，點擊按鈕還會慢慢的抖動。原因是修改多個樣式的時候，所有的樣式并不能都到同時達終點。

出現這個bug的原因：在for循環中判斷是否到達目標值，到達后就清除定時器，但是我們同時修改了5個樣式，可能有的樣式到達目標值后就清楚定時器了，但是有的樣式還沒到達目標值，所以就出現了上面的bug。

解決方法：假設成立法

假設成立

想辦法推翻假設

如果推翻不了，說明假設成立

示例代碼： [21-緩動動畫修改多個樣式-修復定時器bug.html]

function animate(element, obj) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        // 1-假設都到達了終點
        var flag = true;
        for (k in obj) {
            var attr = k;
            var target = obj[k];
            var leader = getStyle(element, attr);
            leader = parseInt(leader) || 0;
            var step = (target - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader += step;
            element.style[attr] = leader + "px";

            // 2- 必須要等到所有的樣式都到達終點才清除定時器
            //    只要有一個樣式沒有到達設定值，說明假設失敗
            if (leader != target) {
                flag = false;
            }
        }
        // 所有的樣式都到達終點后 清除定時器
        if (flag) {
            clearInterval(element.timer);
        }
    }, 15);
}

經過前面幾小節的學習，我們已經可以實現同時修改多個樣式的緩動動畫了。但是細心的小伙伴不知道有沒有發現，目前只能設置跟px有關系的樣式，包括設置border-radiu也不算完善。這是因為我們緩動動畫封裝的時后，設置的element.style[attr] = leader + "px";，所以只能實現跟px有關的樣式。

設置兼容其他屬性的時候，要注意兩點，第一獲取的時候要進行判斷，設置的時候也要進行判斷

1、兼容opacity屬性： [22-緩動動畫修改多個樣式-兼容opacity.html]

function animate(element, obj) {
    clearInterval(element.timer);
    element.timer = setInterval(function() {
        var flag = true;
        for (k in obj) {
            var attr = k;
            var target = obj[k];
            // 判斷獲得的屬性是不是“opacity”，是的話多帶帶處理
            var leader;
            // 獲得當前值
            if (attr === "opacity") {
                // 獲取的時候是個小數，將它乘以100 運算時不會出現精度丟失
                leader = getStyle(element, attr) * 100 || 1;
            } else {
                leader = getStyle(element, attr);
                leader = parseInt(leader) || 0;
            }

            var step = (target - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader += step;
            // 賦值
            // 判斷是不是opacity屬性 是的話 多帶帶賦值
            if (attr === "opacity") {
                // 因為開始的時候leader擴大了100倍 設置的時候 opacity只能是0-1
                element.style[attr] = leader / 100;
                // opacity 還需要多帶帶處理，因為IE678 不支持opacity 
                element.style.filter = "alpha(opacity=" + leader + ")";
            } else {
                element.style[attr] = leader + "px";
            }
            if (leader != target) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(element.timer);
        }
    }, 15);
}

// 處理獲取樣式兼容性
function getStyle(element, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, null)[attr];
    } else {
        return element.currentStyle[attr];
    }
}

// 調用這個函數
btn.onclick = function() {
    animate(box, {
        width: 200,
        height: 200,
        left: 300,
        top: 300,
        // 這里是按照 0-100 設置不透明度的，因為小數計算的時候會出現精度丟失
        opacity: 50
    });
}

2、兼容zIndex屬性： [23-緩動動畫修改多個樣式-兼容zIndex.html]

zIndex這個屬性不需要緩動的執行改變層級，直接獲得傳進來的值設置即可

// 賦值
if (attr === "opacity") {
    element.style[attr] = leader / 100;
    element.style.filter = "alpha(opacity=" + leader + ")";
// 判斷設置的時候是否是zIndex屬性
} else if (attr === "zIndex") {
    element.style.zIndex= leader;
} else {
    element.style[attr] = leader + "px";
}

示例代碼： [24-緩動動畫淡入淡出效果.html]

btn1.onclick = function() {
    animate(box, {
        opacity: 100
    })
}
btn2.onclick = function() {
    animate(box, {
        opacity: 0
    })
}

效果圖：

程序執行完畢，再次執行的函數。

示例代碼： [25-緩動動畫添加回調函數.html]

var box = document.getElementById("box");
var btn = document.getElementById("btn");

fun