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 on multiple elements, 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.
