JQuery synchronous operation

Question

I freeze the elements one by one, but it seems that everything disappears at once.

How can I gradually erase items. Only if it completely disappears, should the second fade out.

I loop and disappear as if

$(ele).fadeIn('slow'); 

Answer 1

I made this quick / easy jQuery plugin for you to do what you want. :-)

 $.fn.extend({ serial_fade: function(o) { if(!o.speed || o.speed == undefined || o.speed == null) { o.speed = 'slow'; } if(!o.fade || o.fade == undefined || o.fade == null) { o.fade = 'in'; } if(!o.index || o.index == undefined || o.index == null) { o.index = 0; } var s = this.selector; if(o.fade.toLowerCase() == 'in') { return this.eq(o.index).fadeIn(o.speed, function() { o.index++; if($(s).eq(o.index).length > 0) { $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index}); } }); } else { return this.eq(o.index).fadeOut(o.speed, function() { o.index++; if($(s).eq(o.index).length > 0) { $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index}); } }); } } }); // To call it just do this: $(ele).serial_fade({speed:'slow',fade:'in'}); // Optionally, you can pass which element you want to start with (0-based): $('a').serial_fade({speed:'slow',fade:'in',index:2}); // If you want to start with element 2 (3, really) and fade all the rest *out* // sequentially, verrry slowly: $(ele).serial_fade({speed:5000,fade:'out',index:2}); 

It should work with any kind of selector, like any other jQuery method. Hope this works for you.

Edit: I expanded it so that it could fade and fade. It just seems more useful so ...

Answer 2

fadeIn has a callback that is executed when fading is complete. Add an elemX class to each element, where x is the fading order. Then use the following code:

 startFading(1); function startFading(order) { $(".ele" + order).fadeIn('slow', function() { if (order < orderMax) { startFading(order+1); } }); } 

Answer 3

You can do this in general, and not make it just disappear.

 function depth(collection, fun, i) { if (i === undefined) depth(collection, fun, 0); else if (i < collection.length) fun(collection[i], function(){ depth(collection, fun, i + 1); }); }; depth($("a"), function(elem, fun) { $(elem).fadeIn('slow', fun); });