Jquery Workshop – Loading a list in order

Glenn Glenn's Blog 0 Comments

Jquery Workshop – Loading a list in order Jquery Workshop – Loading a list in order jquery workshop

A quick one for those of you wondering how to sequentially load a list in order with jQuery with animation.

First off you’re going to need to include the wonderful jQuery framework between the <head></head> tags of your document and you can download it from here:-

Get jQuery OR you can simply hotlink the latest vesion back to the jquery code repository:-

"http://code.jquery.com/jquery-latest.js"

Then you call jQuery and as I like the 'show' animation that's what we are going to use to load in the list elements like so:-

 $(document).ready(function() {
  $("#your_ul_id li:eq(0)").show("slow", function () {
    /* use callee so don't have to name the function */
    $(this).next("li").show("slow", arguments.callee);
  });
});

In your CSS now make the 'li' items display:none; so that then they are hidden until jQuery loads them nicely in order.

#your_ul_id li {
	display: none;
}

Of course you could equally use the same technique to load divs in order under a parent id like so:-

 $(document).ready(function() {
  $("#parent_id li:eq(0)").show("slow", function () {
    /* use callee so don't have to name the function */
    $(this).next("div").show("slow", arguments.callee);
  });
});

If everything is in place now load up your file and let jQuery do the hard work!

About the Author
Jquery Workshop – Loading a list in order Jquery Workshop – Loading a list in order 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *