讓你的特效更平順之二

之前我曾經發表過一篇如何讓你的特效更平順,那時候用的方法是每次function內檢查時間變化,然後決定這時候應該在哪個位置,那時候這方法效果大概已經不錯了,不過我這兩天看Pro JavaScript Techniques,裡面的範例使用的方法看起來會更順暢,他的原理是一開始就把每個時間點要做的動作一口氣設定好,接下來就沒有interval的問題,也不用檢查時間變化,當然也不會有配合setTimeout使用遞迴時的延遲問題,重點部份範例如下:

for ( var i = 0; i <= 100; i += 5 ) {
    (function () {
        var pos = i;
        setTimeout(function () {
            elem.style.height = ( ( pos / 100) * h ) + "px";
        }, ( pos +1 ) * 10 );
    })();
}

這是一個slide down的效果,直接設定好分21次調整元素高度,每次間隔50微秒,這樣子就可以產生順暢的動畫效果了。