Execute code once all "complete" functions have finished on list
I have a list that I animate to fade out. After this has finished I want to run some code but want to run the code once, as opposed to every time each element in the list has finished animating. The code must be run once ALL animation has finished and all li
's have been removed. Here is my current code:
$(".myclass li").animate({'opacity':'0', 'height':'0%'}, function(){
$(this).remove(); //This is run for every "开发者_如何学运维li" which is fine...
function() { /* I want to now run this code only once AFTER all animation has finished */ }
});
$.queue() should help you with this. http://api.jquery.com/queue/
$(".myclass li").animate({'opacity':'0', 'height':'0%'},{"queue":true});
$(".myclass li:last-child").queue(function() {
/* The code you want to run */
});
One possible solution would be:
var elts=$$(".myclass li"),
num=elts.length,
onComplete=function() {
...
};
elts.animate({....}, function(){
$(this).remove();
if(--num === 0 && onComplete) {
onComplete();
}
});
精彩评论