Jquery Workshop – Loading a list in order
Posted in Glenn's Blog by Glenn with No Comments
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!
