• 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

    • Court orders Apple to keep web links in the App Store, eroding its iOS payment monopoly by Fiza Ali Apple has been ordered to continue permitting web links and external payment options in the App Store after its bid to halt court’s ruling was declined today by a higher court. Earlier this year, in April, a federal judge decreed that Apple must allow developers to include web links in their iOS apps, remove restrictions on link formatting, and enable external payment methods without taking a commission on transactions. Apple immediately appealed and sought an injunction to delay implementation of the order while the case progressed. However, the United States Court of Appeals has now refused Apple’s emergency request to stay the district court’s order. In its decision, the panel held that Apple had not demonstrated a sufficient likelihood of success on appeal, nor that it would suffer irreparable harm if the order were enforced. The court also considered potential prejudice to other parties and the public interest, concluding that an immediate suspension was not warranted. This ruling makes it much harder for Apple to overturn the April decision, which came from a lawsuit initiated by Epic Games. Epic first sued Apple’s App Store policies in 2020, claiming that the company’s restrictions harmed competition. While Epic did not prevail on every count, the court did rule that Apple must allow developers to inform users of alternative purchasing options at better prices. Despite that narrow victory, Apple repeatedly failed to conform to the terms from the original 2021 ruling, prompting the judge in April to issue a more detailed order outlining precisely how the App Store must be “opened up”. In response to the April ruling, prominent third-party apps have swiftly implemented web-based purchasing links. Both Spotify and Amazon’s Kindle app now include buttons directing users to purchase subscriptions via their websites, bypassing Apple’s in-app payments. Additionally, Fortnite has made a comeback on iOS after around five years, presenting users with the choice between Apple’s in-app payment system and Epic’s own payment and rewards mechanism. According to Epic CEO Tim Sweeney, there is presently a 60:40 split in usage favouring Apple’s system over Epic’s, though the gap appears to be narrowing. An Apple spokesperson, Olivia Dalton, issued a statement expressing the company’s disappointment: For now, Apple must comply with the existing injunction. Unless the Appeals Court later overturns the ruling, developers can continue to include web payment links, and Apple’s longstanding monopoly over iOS payment processing may continue to erode. The ultimate resolution will depend on the outcome of the ongoing appeals, which could set a significant precedent for how app marketplaces operate in the future. Source: The Verge
    • Reddit posts are all public, no login(therefore no agreeing to contract) to view the content. It's like the equivalent of sitting in a library and writing down notes from a textbook without signing it out and they start suing you for writing notes.
  • Recent Achievements

    • 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
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      397
    2. 2
      +FloatingFatMan
      176
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!