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


最近書いた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で使えます。


この記事を書いた人