• 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

    • This 2TB NVMe Gen4 SSD is priced just $94 and you also get a free 64GB UHS-I memory card by Sayan Sen A few days ago, we reported on Team Group's T-FORCE G50 4TB NVMe SSD that was up for grabs at just $200 thanks to a promo coupon. Sadly, that deal has expired although you can still WD's SN8100 (Gen5) and SN7100 (Gen4) offerings as they are still running the discount. If you don't have the budget for those or are shopping for lower capacity drives then Crucial's T500 Gen4 drive discount is still live, and you can get them for just $125. And while the G50 4TB deal has expired, Team Group is now offering its 2TB model at its lowest ever price and you also get a free Micro SD card with it. The Team Group G50 is also a TLC (triple level cell) NAND flash SSD, and thus the endurance on the T-FORCE SSD is quite good, as it is rated for 1300 TBW (terabytes written) for the 2TB variant. Its MTBF, or Mean Time Between Failure, is claimed at 3,000,000 hours. The operating temperature is 0~70 C. The G50 does not have a dedicated DRAM cache (only the G50 Pro SKUs have it), but since it is based on NVMe version 1.4 which supports HMB (host memory buffer) technology; thus, the drive can use system memory for caching. In terms of performance, Team Group promises sequential read and write speeds of up to 5000 MB/s and 4500 MB/s, respectively. However, the firm does not disclose random throughput metrics. Get the Team Group G50 at the link below (deal is said to be ending in less than 10 hours): Team Group T-FORCE G50 SSD (TM8FFE002T0C129) + Team Group 64GB Elite microSDXC UHS-I U3, V30, A1, Micro SD with SD Adapter, to 100MB/s (TEAUSDX64GIV30A103): $105.99 + $12 off with promo code SSETA665 (Shipped and Sold by Newegg US) This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • I know what you're getting at, but Microsoft themselves have said that the Xbox Ally specifically disables a bunch of stuff from Windows to improve performance and save 2GB of memory. And that special game mode is coming to Windows 11 next year.
    • It could be good old fashion neglect, lower priority focus, less resources then it use to vs active sabotage.
  • 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
      646
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      219
    4. 4
      +FloatingFatMan
      184
    5. 5
      Steven P.
      145
  • Tell a friend

    Love Neowin? Tell a friend!