Photosynthesic blog

夫婦でやってるWeb屋です。

2010-12-14

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

この記事は3年以上前のものです。

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

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter