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 setTimeout
s 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');
});
精彩评论