• 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

    • I think the flub is slightly funny, albeit minor. What will be funnier is the people buying some utterly terrible Chinese Android phone for $500 (that's with a huge profit margin worked in). That said, I've bemoaned this before: I miss the days when Neowin was about Microsoft products and technologies and didn't host articles that would get people riled up politically. It used to be a friendlier place where people were only bitches about insignificant things related to Microsoft.
    • AMD thinks Ryzen Threadripper 9000 wipes the floor with Intel by Sayan Sen At Computex 2025 earlier this year, AMD revealed its new Zen 5-based Ryzen Threadripper 9000 series with up to 96 cores, comprising the PRO 9000WX series and 9000 series chips. At the time though the company did not share performance numbers but given the specs, we had a fairly good idea of their capability. For those who may not be familiar with Ryzen Threadripper, it is AMD's desktop CPU lineup meant for workstations and HEDT (high-end desktop) builds and is placed between the mainstream Ryzen and the server EPYC lineups. With the launch expected to happen next month, performance numbers for the Ryzen Threadripper 9000 are now out. Before diving into the performance details, AMD has also shared a recap of some of the platform details and the compatible sTR5 socket. These new premium chips support up to 8 channels of DDR5-6400 memory and up to 128 PCIe 5.0 lanes for I/O. AMD also promises over 7000 MT/s of DDR5 support with EXPO. The specs of the Ryzen Threadripper 9000 lineup are given below: Processor SKU Cores Threads Base Clock (GHz) Boost Clock (GHz) L3 Cache (MB) Memory Channels PCIe Lanes TDP (W) AMD Ryzen Threadripper PRO 9995WX 96 192 2.5 5.45 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9985WX 64 128 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9975WX 32 64 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9965WX 24 48 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9955WX 16 32 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9945WX 12 24 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper 9980X 64 128 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD Ryzen Threadripper 9970X 32 64 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD Ryzen Threadripper 9960X 24 48 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD has compared the 96-core 9995WX against the previous-gen 7995WX (images below), also with the same core configuration, and the 64-core 9980X, against Intel's 60-core Xeon W9-3595X. While Xeon has generally been associated with Server CPUs, the Xeon W chips are designed to be used in workstations. AMD follows a similar naming, too, wherein the W in the WX is meant to indicate workstation, and the non-W Threadripper is for HEDT. AMD claims up to 26% faster throughput on the newer 96-core 9995WX compared to the 7995WX. Meanwhile, against the Intel Xeon w9-3595X, AMD expects utter dominance from its 9980X with up to 108% faster performance. Even the lowest gain, says the company, is 22% over the Intel chip, and that is still very significant. AMD also compared the AI performance of the 9995WX vs the Xeon w9-3595X. The company promises up to 49% faster LLM processing, but keep in mind that the figures given include a GPU as well. Besides AI, performance related to other creative and professional workloads was also shared. In Keyshot rendering, for example, AMD claims up to 119% gains over the Xeon SKU. And in Chaos V-Ray, the 9995WX is said to offer nearly 2.5 times the performance. AMD has not released pricing information for the Threadripper 9000 series.
    • Funk Microsoft - I would switch from PS5 as you have better deals but the Xbox interface (I tried One S and later on, even one X i hate the interface and considering all MS changes in Windows interface over the years.. I hope they have a good one coming ps5 has also weird interface I had to get used too. But considering the library of ps4 games I wanted to be playable for me… I got used and adapted
    • I loved Sonic CD so much. I think I must have almost worn out that disc!
  • Recent Achievements

    • First Post
      Ian_ earned a badge
      First Post
    • Explorer
      JaviAl went up a rank
      Explorer
    • Reacting Well
      Cole Multipass earned a badge
      Reacting Well
    • Reacting Well
      JLP earned a badge
      Reacting Well
    • Week One Done
      Rhydderch earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      654
    2. 2
      ATLien_0
      267
    3. 3
      Michael Scrip
      218
    4. 4
      +FloatingFatMan
      188
    5. 5
      Steven P.
      146
  • Tell a friend

    Love Neowin? Tell a friend!