Using jQuery.queue with multiple element animations? -

jquery queue's annoying - can't head around it...

the following function contains 4 animations want happen 1 after other (not @ same time).

function startupanime() {      $("#header").animate({"opacity":"1"},{duration:3000, queue:"global"});     $("#header").animate({"top":"0px"},{duration:3000, queue:"global"});     &("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"});     $("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"}); }  $(window).load(function() {       startupanime(); }) 

the 2 #header elements animate 1 after other, rest happen @ same time.

i found out queue works if animating same element!! that's not useful... adding queue:"name" apparently supposed link them same queue... although stops them working me.

am missing here? i'm not sure if queue means 'next animation start when current 1 finished', or 'these animations being held in queue waiting release them' maybe calling queue("global") or something!?

most suggestions talk animating 1 element, or setting many functions , using callback 'iterate' through functions - not clean if ask me. want able run list of animations whenever ask it.

nb: 'list' of animations might animate elements 1 @ time, might want 2 or more elements animate @ same time @ point in list. here's sample:

animate element -> -> animate element b -> -> animate element c , d -> -> animate element e 

you have lot of options, here (because self-explanatory syntax):

$.when(     $("#header").animate({opacity: 1}, 3000).promise(),     $("#header").animate({top: 0}, 3000).promise() ).done(function() {     $("#loader").animate({opacity: 0}, 3000).promise()     .done(function() {         $("#background").animate({"background-position" : "300px center"}, 3000)     }) }) 

demo: http://jsfiddle.net/vjazx/