how to fadein LI elements randomly? (jquery)

Question

Hi I've got a set of <li> with a hover effect, what I want is when the page loads ALL the <li> elements fade-in randomly.

I don't want to shuffle them...they should keep their ordering intact meaning 1,2,3,4,5. I just want to make them appear on the page randomly and stay there.

Test page:
http://humayunrehman.com/hovertest/

Answer 1

You can do something like this:

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.