天才少年James Padolsey寫過一個神奇的jQuery 'delay' plugin,我來狗尾續貂一下...

我的需求是要在動畫播放過程中加入一些非數字型CSS屬性的變化,例如: 在變寬動晝結束後,為文字加上底線。animate()有callback可指定動畫結束時的動作,所以可寫成:
.animate({ width:"100" }, 100, function() { $(this).css({ textDecoration: "underline" }); })

然而,還有另一種情況,我們純粹想在一段時間後改變元素Style,而不用結合任何animate(),例如: 一秒後改字型、兩秒後加上底線。傳統Javascript會用setTimeOut()實踐,挺囉嗦的。James的delay plugin巧妙地運用了animate()循序執行queue的機制,讓一連串的動作可以用.delay()串起來,簡潔易讀許多。因此用.delay()做到預訂時間後修改CSS,我們寫成:
.delay(100, function() { $(this).css("font-family", "arial"); });

不過,我還是覺得不夠簡短,動作一多,得寫出一堆無意義的function() { $(this)... },索性在James的delay plugin加了三行,讓修改CSS屬性時可再簡寫為:
.delay(100, { "font-family", "arial" });

嗯,更有jQuery極簡風的fu了~~~

$.fn.delay = function(time, callback) {
    // Empty function:
jQuery.fx.step.delay = function() { };
    // You can set the second argument as CSS properties
    if (typeof callback == "object")
    {
        var cssObj = callback;
        callback = function() { $(this).css(cssObj); }
    }
    // Return meaningless animation, (will be added to queue)
    return this.animate({ delay: 1 }, time, callback);
}
 
$("<div id='x'>Darkthread</div>")
.appendTo("body").width(100)
.delay(500, { color:"blue", border:"solid 1px red" })
.animate({ width: "200px" }, 1000)
.delay(1, { backgroundColor:"yellow", fontWeight:"bold" })
.delay(1000, function() { alert("Done!"); });

Comments

Be the first to post a comment

Post a comment