开发者

jQuery: Inserting li items one by one?

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")
 开发者_如何学Python            }
   }
  });
 }
  });
 },
...

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?


You might want to get the wanted effect by coding as following:

$(slotname + "div_li" + i).hide().delay(i*n).show("slow");

where n is some soft of delay modifier (in milliseconds); I assume i also here is the index, and thus a number.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜