开发者

jQuery slideDown of Ajax return, with div delay

This should be simple.

I have ajax returning string, with multiple divs. I need to count each div in the string (so if necessary maybe i have to create an array) and then slideDown each div every x seconds with a little .delay('200');.

Please keep in mind the ajax return could be different on each return so it has to work for x amount of divs.

For example


// For testing lets pretend ajax.return is
ajax.return = '<div>BLEH CONTENT</div> <div>BLEH CONTENT</div>';

var com = $(ajax.return).hide();
com.prependTo('#container').slideD开发者_如何学编程own('fast'); 

Right now the code I have obviously does one quick slideDown of all the divs in ajax.return it treats it as one string and prepends the whole string.

Can someone help me create a loop for each div in the string and apply a slideDown for each one with a 1 or 2 sec delay in between each slideDown.


Working Demo

var a = '<div>BLEH CONTENT</div><div>BLEH CONTENT</div>';

$(a).prependTo('#container').hide().each(function(i){
    var self = $(this);
    window.setTimeout(function() { self.slideDown('fast'); },1000*i);
});

depending on how many divs you have, setting up multiple setTimeouts may be become a problem. I'm not overly sure if there is a limit to how many can be set at any one time without severely affecting timings. Anyone care to comment?


Maybe something with recursion, like this (tested):

ajaxret = $('<div>BLEH CONTENT</div><div>BLEH CONTENT</div>').hide();
ajaxret.prependTo('#container');

var toSlide = $('#container div'); // add .andSelf() to include container 
var i = 0;
( function revealNext() {
    toSlide.eq( i++ ).delay('1000').slideDown('fast', revealNext);
//           each div        1sec      
})();

​ You can probably be a little more concise with selectors and such, but you get the general idea.


From the top of my head:

$('div', ajax.return).each(function() {
  $(this).prependTo('#container').slideDown('fast'); 
});
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜