一、需求描述

做一個進度條長度逐漸減少的動畫，當進度條長度小於等於0時，關閉動畫，並彈出透明底板顯示新提示。

二、問題描述

初始代碼如下：

//設置進度條初始長度
var progressLength = 180;    
//設置一個定時器    
var timer = setInterval(function () {
    //開始遊戲後進度條逐漸消失
    progressLength -= 10;
    $(".progress").animate({
        width: progressLength
    });
    console.log("hh");
    //如果進度條走到盡頭
 

    if (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);

遇到問題：

進度條遞減的速度快於動畫速度，導致動畫還沒執行完，progressLength就已經≤0，底板就彈出來了。

三、問題解決

首先，導致問題的原因是：

animate動畫執行有默認時長，即1000（1s），就是第二個參數。

而先前設置的定時器執行時長是50，導致兩廂不匹配，即animate函數域裏外不是一個速度。

解決方法：（消滅時間差）

1.設置animate第二個參數，使執行時長等於外面定時器的執行時長；

（不推薦，因為兩個函數之間總有執行上的時間差）

//設置進度條初始長度
var progressLength = 180;    
//設置一個定時器    
var timer = setInterval(function () {
    //開始遊戲後進度條逐漸消失
    progressLength -= 10;
    $(".progress").animate({
        width: progressLength
    },50);
    console.log("hh");
    //如果進度條走到盡頭
    if
 
 (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);

2.改animate為css，這樣就變成靜態函數，沒有時間差了

//設置進度條初始長度
var progressLength = 180;    
//設置一個定時器    
var timer = setInterval(function () {
    //開始遊戲後進度條逐漸消失
    progressLength -= 10;
    $(".progress").css({
        width: progressLength
    });
    console.log("hh");
    //如果進度條走到盡頭
    if (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);

animate默認時長所帶來的問題及解決