Page 1 of 1

[solved]queuing animations on multiple elements in jquery

Posted: Mon Jan 12, 2009 8:09 pm
by daedalus__
I'm using this:

Code: Select all

 
$("#content").animate({ height: 'hide', width: 'hide' }, 'slow');
 
$("#content").animate({ height: 'show', width: 'show' }, 'slow');
$("#bottom").css({borderColor: "#cccc00"});
$("#bottom").animate({ borderTopColor: "#101060"}, 'slow');
 
to collapse the content container, change the bottom divs border color, uncollapse the content container, and then fade the bottom divs border color back to its original. however, it isn't working that way. it hides and shows at the same time the border changes and fades back to normal.

i'm trying to find out how to queue them so the border color change happens after the content div collapses out and back in. i read that you can queue animations for the same element but im having trouble finding an example of what im trying to do.

if anyone knows anything, i'd appreciate the help. thanks!

Re: queuing animations on multiple elements in jquery

Posted: Mon Jan 12, 2009 8:34 pm
by Eran
you can either use a callback as a third parameter, or use the animation queue. From the manual - http://docs.jquery.com/Release:jQuery_1 ... ueue.28.29

Re: queuing animations on multiple elements in jquery

Posted: Mon Jan 12, 2009 8:40 pm
by daedalus__
i tried to use the animation queue like this:

Code: Select all

 
$("#bottom").css({borderColor: "#cccc00"});
$("#content").animate({ height: 'show', width: 'show' }, { queue:true, duration:800 });
$("#bottom").animate({ borderTopColor: "#101060"}, 'slow');
 
it didn't work. perhaps that's the wrong implementation?

i'm going to try a callback.

Re: queuing animations on multiple elements in jquery

Posted: Mon Jan 12, 2009 9:09 pm
by daedalus__
perfect and a charmer :]

Code: Select all

 
$("#content").animate({ height: 'show', width: 'show' }, 1500, 'linear', function(){
    $("#bottom").css({borderColor: "#cccc00"});
    $("#bottom").animate({ borderTopColor: "#101060"}, 3000);
});