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.
