最近書いたjQueryのメモです。
配置された複数の画像をランダムにパラパラ表示する、というもの。
参考にさせていただいた
ひとつめは、jQueryのがらぽん。
jQuery: Shuffle Plugin
配列にも要素にも適応できるのが素敵。
ふたつめは、jQuery 1.4のdelayについて。
jQueryメモ delayメソッドでずらしてみる – lovelog || Loveness×Zeroless
んでこんなのができました。
ul.images 以下に9枚の画像があるケース。
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); }); });
って、delay超便利!jQuery1.4で使えます。