[solved]queuing animations on multiple elements in jquery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

[solved]queuing animations on multiple elements in jquery

Post 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!
Last edited by daedalus__ on Mon Jan 12, 2009 9:10 pm, edited 1 time in total.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: queuing animations on multiple elements in jquery

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: queuing animations on multiple elements in jquery

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: queuing animations on multiple elements in jquery

Post 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);
});
 
Post Reply