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();

您可以在此处查看带有 html/图像的演示。感谢 Jordan Boesch 的排序算法，与jsquares中使用的算法相同。

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