jQuery: Inserting li items one by one?
- by Legend
I wrote the following (part of a jQuery plugin) to insert a set of items from a JSON object into a <ul> element.
...
query: function() {
...
$.ajax({
url: fetchURL,
type: 'GET',
dataType: 'jsonp',
timeout: 5000,
error: function() { self.html("Network Error"); },
success: function(json) {
//Process JSON
$.each(json.results, function(i, item) {
$("<li></li>")
.html(mHTML)
.attr('id', "div_li"+i)
.attr('class', "divliclass")
.prependTo("#" + "div_ul");
$(slotname + "div_li" + i).hide();
$(slotname + "div_li" + i).show("slow")
}
}
});
}
});
},
...
Doing this maybe adding the <li> items one by one theoretically but when I load the page, everything shows up instantaneously. Instead, is there an efficient way to make them appear one by one more slowly? I'll explain with a small example: If I have 3 items, this code is making all the 3 items appear instantaneously (at least to my eyes). I want something like 1 fades in, then 2 fades in, then 3 (something like a newsticker perhaps). Anyone has a suggestion?
