如何随机淡入LI元素? (jquery) [英] how to fadein LI elements randomly? (jquery)

问题描述

我有一组具有悬停效果的<li>，我想要的是页面随机加载所有<li>元素淡入时的效果.

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.

我不想洗牌...他们应该保持顺序不变，即1、2、3、4、5.我只想让它们随机出现在页面上并留在那里.

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.

测试页:
http://humayunrehman.com/hovertest/

推荐答案

您可以执行以下操作:

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 中使用的算法相同.

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

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

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.

这篇关于如何随机淡入LI元素? (jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！