讓你的特效更平順之二

之前我曾經發表過一篇如何讓你的特效更平順，那時候用的方法是每次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微秒，這樣子就可以產生順暢的動畫效果了。