Why do the fadeIn and animate not happen at the same time?

Why does the an开发者_运维问答imate wait for the fadeIn to complete before it executes, can anyone shed some light for me please?

//Price Navigation FadeIn

$('#header-base > ul').hide().css({'top':'50px'});

$('#header-base > ul').fadeIn(500);
$('#header-base > ul').animate({'top':'0px'});

I want the fadeIn and animate to happen simultaneously.

The problem is that animations are automatically put in the effects queue. You can alter this by supplying a queue setting:

$('#header-base > ul').animate({top: '0px'}, {queue: false});

See the animate API.

Not sure why they don't happen at the same time, but a quick fix is to just

1. Set the element's opacity to 0
2. Show the element
3. Add an opacity fade-in to your animate function...

Perhaps something like...

$('#header-base > ul').css({'top':'50px', 'opacity':'0'});
$('#header-base > ul').animate({top:'0px', opacity: 100}, 500);