0

天才少年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