jQueryで配置された複数の画像をランダムにパラパラと表示する


最近書いたjQueryのメモです。

配置された複数の画像をランダムにパラパラ表示する、というもの。

参考にさせていただいた
ひとつめは、jQueryのがらぽん。
jQuery: Shuffle Plugin
配列にも要素にも適応できるのが素敵。

ふたつめは、jQuery 1.4のdelayについて。
jQueryメモ delayメソッドでずらしてみる – lovelog || Loveness×Zeroless

んでこんなのができました。
ul.images 以下に9枚の画像があるケース。

[javascript]var arr = [1,2,3,4,5,6,7,8,9];
arr = $.shuffle(arr);//Shuffle Pluginを使ってシャッフル

jQuery(document).bind("ready", function(){
$(‘ul.images li’).hide();
$(arr).each(function(k,n){
var num = k * 500;
$("ul.images li:nth-child(" + n + ")").delay(num).fadeIn(800);
});
});[/javascript]

って、delay超便利!jQuery1.4で使えます。