如何随机淡入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。感谢 Jordan Boesch 的排序算法，与jsquares 中使用的算法相同。

这会将它们全部隐藏，随机抓取下一个:hidden，将其淡入，50 毫秒后开始下一个，创建一个随机淡入效果。只需根据需要调整时间，如果需要，也可以将时间传递给.fadeIn()。这也会在完成后停止排队效果。