CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Jai
Jai

Reputation: 2204

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

Why does the animate 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.

Upvotes: 2

Views: 831

Answers (2)

lonesomeday
lonesomeday

Reputation: 237855

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.

Upvotes: 4

Thomas Shields
Thomas Shields

Reputation: 8942

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);

Upvotes: 0

Related Questions