load ...
success callback starts function(){
$('#yellowDiv').fadeOut('normal', function(){
var offset = $('#blueDiv').offset(); // using dimensions
plugin, or
var offset = {left:$('#blueDiv').css('left')}; // if css has
left set, or .... whatever
setTimeout(2000, function(){ $('#blueDiv').animate({left:
(offset.left+100)}, 'normal', myCallback); });
});
} // end of success callback
Just bear in mind:
How you determine where to move the blueDiv to is up to you.
Anything you put after the setTimeout call will be happening during
the 2 second wait and the animation.
I've used anonymous functions - you don't have to.
I've used animate - you may just want to use css().
I've put a callback in the animation - you may not need one.
setTimeout returns a timer that you may want to use in case you need
to do something depending on what else might/might not happen within
those 2 seconds.
All the above is for illustration only.
On Oct 10, 4:00 pm, marc0047 <[EMAIL PROTECTED]> wrote:
> I have two boxes, a yellow one and a blue one, and I want to animate
> them at separate intervals.
>
> This is an example of what I would like to happen:
>
> 1. Loading page complete
> 2. Yellow div box fades to zero opacity.
> 3. Wait 2 seconds
> 4. Blue div box moves left to right 100 pixels.
>
> I can get them to perform animations at the same time, but I can't
> seem to wrap my head around getting the script to wait 2 seconds
> before performing the next command.
>
> Is there a simple techinque that already exists to perform this task?
