javascript - LI要素をランダムにフェードインする方法は？（jquery）

Question

こんにちは私は<li>ホバー効果のあるセットを持っています、私が欲しいのはページがすべての<li>要素をランダムにフェードインするときです。

私はそれらをシャッフルしたくありません...彼らはそれらの順序をそのままにして、1、2、3、4、5を意味する必要があります。それらをランダムにページに表示させ、そこにとどまらせたいだけです。

テストページ： http：
//humayunrehman.com/hovertest/

Answer 1

あなたはこのようなことをすることができます：

var v = $("#blocks > li").css('visibility', 'hidden'), cur = 0;
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
function fadeInNextLI() {
  v.eq(cur++).css('visibility','visible').hide().fadeIn();
  if(cur != v.length) setTimeout(fadeInNextLI, 50);
}
fadeInNextLI();

You can view a demo with your html/images here. Credit to Jordan Boesch for the sorting algorithm, the same one used in jsquares.

This will hide them all, grab at random a next :hidden one, fade it in, and 50ms later start the next one, creating a random-ish fadeIn effect. Just adjust the time as needed, also pass a time into .fadeIn() if you want. This will stop queuing effects when it's done as well.