That's pretty useful Balazs, for some reason I couldn't get it to worked though. I saved your plugin bit that appears in that link in a file and named it jquery.asynceach.js and linked it to the page. Anyway, I'll play around with it a little more to see where the problem is.
Thanks again On Jan 13, 11:37 am, Balazs Endresz <balazs.endr...@gmail.com> wrote: > I've actually made a bit nicer abstraction as a jQuery plugin a while > ago, I think it's much more useful for such things, I almost forgot > about it:http://jsbin.com/unini/edit > > This is how your code looks like with it: > > $("#container :first-child").asyncEach(function(){ > $(this).fadeIn('slow'); > > }, 500); > > No global variables, can be reused onmultipleelements, you can stop > it, add custom easing and there's a `complete` callback function too! > > On Jan 13, 3:49 pm, legofish <pen...@gmail.com> wrote: > > > Thank you so much for the reply. I had figured it out but your way is > > much more elegant. here's what I had done: > > > $(".box").hide(); > > > var currentBox = $("#container :first-child"); > > fadeMyBoxes(currentBox); > > > function fadeMyBoxes(thisbox){ > > > thisbox.fadeIn('slow'); > > > if (thisbox.is(":last-child")){ > > clearTimeout(t); > > } > > > else { > > var t =setTimeout( > > function(){fadeMyBoxes(thisbox.next());},50); > > } > > > }; > > > On Jan 10, 10:04 am, Balazs Endresz <balazs.endr...@gmail.com> wrote: > > > > It can be done with setInterval too but doing it recursively > > > withsetTimeoutis a bit better: > > > > var i=0, elements=$('.box'), length=elements.length; > > > > functionfade(delay){ > > > elements.eq(i++).fadeOut(); > > > if(i<=length) > > > setTimeout(arguments.callee, delay); > > > //arguments.callee is a reference to the current function > > > > } > > > >fade(500); > > > > On Jan 10, 3:05 am, legofish <pen...@gmail.com> wrote: > > > > > Hi, > > > > > I have 20 divs all with the class ".box" on my page. > > > > I want to apply the fadeIn() effect to all of them. > > > > I dont want them to allfadein at the same time. > > > > I want them tofade-in one by one, with a slight time offset. > > > > I dont want to use callback functions, because I dont want to wait > > > > until thefadeis completely finished on one div before fading the > > > > next div. I want thefadeeffect on the next div to start a short time > > > > after the effect on the previous one has started. > > > > > So I think I need to usesetTimeoutand some kind of a recursive > > > > method, but I'm not very good with JS so I was hoping someone would > > > > find this trivial and could help answer my question. > > > > > my thanks in advance.
