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: 360

Filed under:
|

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

Related posts about JavaScript

Related posts about jQuery