jQuery: Inserting li items one by one?
Posted
by Legend
on Stack Overflow
See other posts from Stack Overflow
or by Legend
Published on 2010-05-30T01:02:22Z
Indexed on
2010/05/30
1:12 UTC
Read the original article
Hit count: 384
JavaScript
|jQuery
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?
© Stack Overflow or respective owner