Ah! Also good to know! I see what you mean about the anonymous
functions. I reorganized the script with sequential functions, and it
works exactly how I want, thanks!
----------------------
function sequence1() {
$('#box1').animate({opacity: 0.1}, 5000, sequence2);
}
function sequence2() {
$('#box2').animate({left: '200px'}, 2000);
}
sequence1();
----------------------
On Oct 11, 10:21 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Every animation can have an 'on completion' callback ...
> eg.
>
> $('#box1')
> .animate(
> { opacity: 0.1} // what
> , 5000 // speed
> , function(){ // callback
> $('#box2').animate( {left: '200px' }, 2000);
> } // end of callback
> ); // end of animate
>
> Just be careful not to use too many anonymous functions or your code
> will get very difficult to follow!
>
> On Oct 11, 5:50 pm, marc0047 <[EMAIL PROTECTED]> wrote:
>
> > Ah!
>
> > Michael: thanks! Now I know how that works.
>
> > Wizzud: thanks! It works perfectly! Here's the code for anyone else
> > interested:
>
> > $('#box1').animate({opacity: 0.1}, 5000);
>
> > setTimeout(function() { $('#box2').animate({left: '200px'}, 2000); },
> > 5000 );
>
> > I was also wondering if there is a way for javascript or jquery to
> > recognize when an animation is done, that way I don't have to count
> > seconds for the next animation? In order to give the appearance of
> > items being sequentially animated, I have to count the time before the
> > next setTimeout is executed: in the code above, I am counting 5000ms
> > for #box1 to animate and then counting 5000ms before the setTimeout
> > executes. Is there a method to just have the script check when the
> > last animation was completed so I can execute subsequent commands?
>
> > On Oct 11, 1:19 am, Wizzud <[EMAIL PROTECTED]> wrote:
>
> > > Sorry about that, I was writing from memory and got the 'what' and the
> > > 'when' the wrong way round!
> > > Correct format for setTimeout is ...
>
> > > var timeout = setTimeout ( script-to-execute, time-in-milliseconds );
>
> > > ... so just swap the 2000 and the function around.
>
> > > Apologies.
>
> > > On Oct 11, 1:55 am, "Michael Geary" <[EMAIL PROTECTED]> wrote:
>
> > > > You have the arguments to setTimeout reversed.
>
> > > > setTimeout is a browser function, not a jQuery function. Just Google for
> > > > javascript settimeout and you'll find it.
>
> > > > -Mike
>
> > > > > From: marc0047
>
> > > > > Thanks, 'setTimeout' gives me a big jump start!
>
> > > > > However, I had a little trouble getting it to work: Firebug
> > > > > is warning me that setTimeout is possibly missing quotes and
> > > > > arguments, but I'm pretty sure I followed your example
> > > > > exactly. The following setup has the yellow box (#box1)
> > > > > performing the opacity change, but the blue box
> > > > > (#box2) is getting an error:
>
> > > > > $('#box1').animate({opacity: 0.1}, 1000);
>
> > > > > setTimeout(2000, function() {
> > > > > $('#box2').animate({left: '200px'}, 5000); } );
>
> > > > > Also, I had a hard time finding documentation for setTimeout
> > > > > in jQuery docs. Anyone know the exact url to the documentation?
>
> > > > > Thanks!
> > > > > Marc
