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!

Post discussion

Leave a comment

*

About

Slick Media are a small, friendly and professional web design and development company based in London, UK. Headed up by Glenn Eastland we are really good at taking new business start ups and SME’s to the next level and beyond.
Read more

Contact & Live Skype Chat

General enquiries: info@slickmedia.co.uk

Skype: slickmediauk (please do call or chat with us) – we will be very happy to answer your questions

Newsletter

Our newsletter is great. Subscribe and get the latest updates.