• 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 did not spot that! "This article was generated with some help from AI and reviewed by an editor", to me, suggests it was indeed entirely generated by AI and just looked over by Sayan. Bond. Mate 😔
    • Good. They shouldn't be allowed to block this stuff anyway. They're getting paid to host your app to begin with, they get a cut of the sale of the app to start. After the app leaves their servers and is on your device, the dev should be free to offer you alternative options for payments or links to their site directly from within their own app. Since these systems don't use any of Apples services at all, there should also be zero reason they should demand a cut for doing nothing like they're some digital mafia.
    • I suspect this was primarily developed with the Switch 2 in mind, which would explain the poor visuals. It seems like they're hoping the nostalgic GoldenEye 64 crowd is still loyal to Nintendo consoles. Unfortunately, this might be yet another title limited by development for underpowered Nintendo hardware.
    • Amazon's Lab126 ventures into "Physical AI" with new robotics team by Paul Hill Amazon has announced that it’s forming a new agentic AI team within its secretive hard research and development division, Lab126, to begin work on physical AI. Specifically, the company is looking to develop an agentic AI framework for use in robotics, which could start to impact blue-collar jobs, especially at its warehouses. Agentic AI is one of the latest developments in AI, superseding the previous generative AI that took off with the launch of ChatGPT. Agentic AI models are special because they can complete multi-step actions for the user to complete complex tasks. Thanks to all the visual and audio capabilities added to generative AI in previous years, these agentic models can perceive their environment, reason, plan, and act to achieve goals with minimal human intervention. If Amazon can successfully bring agentic AI to robots, they will finally be able to interact with the real world in a way they can’t today, as software running on a computer. Many people are concerned about AI’s impact on white-collar jobs right now, but when Amazon develops physical AI, it will also affect blue-collar manual work. The work is going to be carried out by Amazon’s R&D company, Lab126. It was set up over 20 years ago and has created many iconic Amazon devices, including the Kindle, Fire tablets, Amazon Fire TV, Amazon Echo devices, and more. Who it affects, and how The biggest impact of physical AI developed by Lab126 will be on Amazon’s warehouses and logistics. The company said it wants to create robots that can perform tasks based on natural language instructions. As usual for a big tech company, Amazon claims that these robots will be assistants, but it’s difficult to see how they won’t reduce the need for people. Solely based on Amazon’s plans to automate work in its factories, customers will see an indirect impact from the move through faster deliveries and potentially lower costs. The decision by Amazon to focus on agentic AI in robots is pretty interesting because so far, we’ve mainly been hearing about agentic AI limited to computer applications, such as intelligent web browsers like Opera Neon. Why it's happening Amazon has a reputation for being an efficient company, particularly when it comes to the employment of warehouse workers who are known to have strict restroom breaks. Creating robots that can help speed up warehouse activities will further boost efficiency at the company and could potentially reduce its costs and improve safety. The beginning of work on physical AI is just the next evolution of AI that we could start to hear about in the coming months and years. As agentic AI gets better, companies will be looking to see what they can advance next and physical AI may be where they choose to go next; it certainly seems like this is what Amazon has settled on in this move. If Amazon’s physical AI doesn’t lead to mass layoffs of warehouse employees, it could drastically boost worker safety. Employees could potentially be less fatigued from moving around so much, which could lead to better concentration and fewer accidents. Right now, Amazon claims that these robots will only be assistants and not replacements. While Amazon will certainly be a leader in physical AI, given its massive wealth to throw at the problem, once the technology is available, it will likely be available for sale to other businesses to use, too. Caveats and what to watch for While it’s a notable development, it still sounds like Amazon is in the early stages of developing these physical AI systems, given that it has only just set up the team. We also don’t know what specific products Amazon is planning to build or the timelines for deployment. Ever since generative AI came onto the scene, there has been discussion of AI safety. With AI moving into the physical world, it will also bring up discussion about the safety concerns. Current measures are mainly concerned with AI software running on computers, not when it interacts physically with the world. Finally, and probably the biggest concern, what will these “assistants” do to people’s jobs? Companies will likely find themselves bringing in fewer new hires initially, but it could also displace people from their jobs. Source: CNBC
    • Nintendo Switch 2 launches, where to buy and a list of games that it may not support by Sayan Sen Nintendo announced the Switch 2 back in early April this year and then followed that up with more details related to performance and hardware features later. The company touted 10x the performance of the Switch. However, on the flip side, the battery suffers, and you also need new microSD Express cards for storage. For those who need a refresher, here are the technical specification details of the Switch 2: Specification Details Dimensions Approx. 166mm x 272mm x 13.9mm (with Joy-Con 2 attached); Maximum thickness from control stick tip to ZL/ZR buttons: 30.7mm Weight Approx. 401g (console only); Approx. 534g (with Joy-Con 2 controllers attached) Screen 7.9-inch capacitive touch LCD; 1920x1080 resolution; HDR10 support; VRR up to 120 Hz CPU/GPU Custom processor made by NVIDIA Storage 256 GB UFS (a portion reserved for system use) Communication Wireless LAN (Wi‑Fi 6), Bluetooth; Wired LAN available in TV mode via dock Video Output Up to 3840x2160 at 60 fps via HDMI in TV mode; Supports 120 fps at lower resolutions; HDR10 enabled Audio Output Linear PCM 5.1 channel via HDMI; Stereo speakers Microphone Built-in monaural microphone with noise cancellation, echo cancellation and auto gain control Buttons POWER and Volume buttons USB Ports 2 USB Type-C ports (bottom port for charging/dock connection; top port for accessories/charging) Audio Jack 3.5mm stereo mini plug (CTIA standard) Game Card Slot Supports both Nintendo Switch 2 and Nintendo Switch game cards Expansion Slot microSD Express card slot (compatible with cards up to 2 TB; other microSD cards can copy screenshots and videos) Sensors Accelerometer, gyroscope, brightness sensor Battery Lithium-ion, 5220 mAh; Approx. 2–6.5 hours lifetime; 3-hour charge time in sleep mode Dock Approx. 115mm x 201mm x 51.2mm; Weight: approx. 383g For those looking to get one, major retailers like Walmart, GameStop, Best Buy, and Target have all confirmed that they will have limited console stock from time to time so you will need to be on alert and check back. Nintendo has also published a full list of games that may not work on the Switch 2: Borderlands 3 Chrono Cross: The Radical Dreamers Edition Crash Bandicoot N-Sane Trilogy Guilty Gear XX Accent Core Plus R KarmaZoo Marvel vs. Capcom Fighting Collection: Arcade Classics Mortal Kombat 1 Overwatch 2 Star Wars: Knights of the Old Republic II: The Sith Lords Star Wars Republic Commando Super Mega Baseball 4 Tombi! Special Edition Tony Hawk's Pro Skater 1+2 Touhou Genso Wanderer Reloaded Ty the Tasmanian Tiger HD Warriors: Abyss However, keep in mind that Nintendo last updated the support list last month on May 27th and the company may still be testing these. So keep an eye on the official list of games on this webpage here on Nintendo's site. Have you managed to pick up the Nintendo Switch 2? Let us know in the comments.
  • 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
      177
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!