• 0

(Javascript - Jquery) how to fadein LI elements randomly?


Question

Hi ive got a set of li with hover effect, what i want is when the page loads ALL the li fadein randomly.

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

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

8 answers to this question

Recommended Posts

  • 0

Not actual code but:

- Grab elements by classname or tagname put into array (classname is better if you have other li elements on page)

- create loop, loop until no items left in array

- get length of array

- get random number based on length of array

- fade in item based on random number

- remove item from array

- end loop

  • 0
  On 14/06/2010 at 08:36, crashguy said:

Not actual code but:

- Grab elements by classname or tagname put into array (classname is better if you have other li elements on page)

- create loop, loop until no items left in array

- get length of array

- get random number based on length of array

- fade in item based on random number

- remove item from array

- end loop

not so advance with jquery, this is the ID name:

ul#blocks

tried

var randomnumber=Math.floor(Math.random()*$("#blocks").children().length

cant seem to get the number of li inside a ul

  • 0

number of LI's inside this UL

var count = $('ul#blocks li').length;

targeting a single LI inside the UL

var $theLi = $('ul#blocks li:eq(2)'); //gets the THIRD LI (children array is 0-based)

it'd be wise to play with the basics of using jQuery (selectors, attributes, traversing, manipulation) before you dive in the deep water and try animations and effects in collections of elements...

  • 0

I think I found a neat solution for this problem. We can use the fact that jQuery collections can behave just like native arrays, and thus we can also shuffle them like we would shuffle arrays.

I found a great shuffling algorithm on http://jsfromhell.com/array/shuffle, which I use for this solution. The only thing I changed is the way Math.random() * i gets rounded. In the original code, the author uses parseInt() to round the number down, but this is much slower than using Math.floor(). I wanted to change it to Math.floor(), until I found an even faster way to do this using bitwise operators. Simply put, (n | 0) or (n >> 0) is the fastest way to round a positive floating point number to the greatest integer smaller than the float.

With this shuffle function, I first tried to get an array out of the jQuery collection, shuffle it and make a jQuery collection out of it again. However, due to the way the shuffle function works, I can simply throw the jQuery collection straight into it, shuffling the order of the jQuery collection - simple as that!

Finally, to make the next item in the list fade in after the previous animation is done, I use a helper function. This helper takes a list of items, animates the first item in the list and calls itself in the animation callback after popping the first item from its list. The result is a perfect animation of items nicely waiting for each other to fade in.

So there you have it, a solution which shows some of the lesser known beauties of JavaScript and jQuery. Sure, this is pretty advanced stuff and it may look all very complex at first, but try to study what's happening and soon you'll see the beauty of it. :)

(function($) {
	// Get the list items and hide them
	var items = $("#blocks > li").css({opacity:0});
	// Shuffle them
	shuffle(items);
	// Start the fade-in queue
	nextItemFade(items);

	// Animation callback to start next fade-in
	function nextItemFade(items) {
		// Fade in the first element in the collection
		items.eq(0).animate({opacity:1}, 500, function() {
			// Recurse, but without the first element
			nextItemFade(items.slice(1));
		});
	}

	// Shuffles an array
	// Based on http://jsfromhell.com/array/shuffle
	function shuffle(a) {
		var j,              // Random position
		    x,              // Last item
		    i = a.length;   // Iterator
		// Loop through the array
		while(i) {
			// Select a random position
			j = (Math.random() * i) | 0;
			// Get the last item in the array
			x = a[--i];
			// Swap the last item with the item at the selected position
			a[i] = a[j];
			a[j] = x;
		}
		return a;
	}

	/* Minified version
	function shuffle(a) {
		for(var j, x, i = a.length; i; j = (Math.random() * i) | 0, x = a[--i], a[i] = a[j], a[j] = x);
		return a;
	} */
})(jQuery);

  • 0

wow....amazin stuff...thanks a lot.

im a graphic design whos trying to step into the realms of web development and its fascinating to see what one can achieve without the use of flash....

jquery is great.....i'm trying to see through your code.....

now all is left is to try to figure out how to trigger the hover event AFTER all the li have faded In.......currently, while the li are fading in randomly if a user hovers on any of the li the hover event is triggered and everything just stops right there.....

big big thanks to you....

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • How long until the Windows 11 hating bots come and say that Windows 11 committed atrocities against their family and their dog?
    • If you never consented to cookies (required), and you're blocking ad domains and you never see ads on Neowin (despite whitelisting) wouldn't you agree the adblock popup notice is doing what it is supposed to do?
    • It's just exactly what it looks like. The facial polygon count is low and rigid, and the background appears heavily blurred. You can clearly see jagged edges around the car window as it exits the tunnel. The character animations feel like they're from 2010. The Xbox Series S has performance similar to an RX 570 or GTX 1660, which is disappointing and contributes to holding back game development. The Switch GPU is roughly on par with a 2050 or 3050, which is even worse. Developers have often discussed the challenges and limitations of developing for outdated/low end hardware, noting how it can hold back progress. This isn't a new issue. I am sure we will hear about the "Challenges" they had to overcome here and sacrifices that had to be made for compatibility with the outdated/low end hardware.
    • Whether on Edge or Firefox, I don't get this prompt to accept cookies, because they're already whitelisted by the Cookie AutoDelete extension, both on Edge and Firefox. And, as I've already said, using Edge (yesterday), Neowin isn't whitelisted (I never use Edge), and I didn't get that pop-up. And this morning, after checking, still no pop-up, and everything is activated, the proof (screenshot), I have no ads on the right side. I must add that I block the following trackers Doubleclick, and Scorecardresearch, as well as a few other undesirable ones, via the Host file. Back to square one! After all, it's a simple click to continue, so I'll do with it. 🤷🏽‍♂️ Thank You
    • F'ing FIIINALLY! Much easier to ask people what their hardware is 🙏 and could also very well just say DDR4 or DDR5 without asking to bloat it too much. I'm also curious to see what it will say in More device info...
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      400
    2. 2
      +FloatingFatMan
      178
    3. 3
      snowy owl
      171
    4. 4
      ATLien_0
      169
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!