如何随意淡化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，淡入，50ms后启动下一个，创建一个随机的淡入淡出效果。只需根据需要调整时间，如果需要，也可以将时间传递到.fadeIn()。这也会在完成后停止排队效果。