How do you fadeIn and animate at the same time?

Question

Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically.

So far I have this:

$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');

Doing it that way or this way:

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');

The animations will run one at a time, the fade in first and then the vertical animation. Is there a way to have it do both at the same time?

Solution 1

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');

However, this doesn't appear to work on display: none elements (as fadeIn does). So, you might need to put this beforehand:

$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);

Solution 2

For people still looking a couple of years later, things have changed a bit. You can now use the queue for .fadeIn() as well so that it will work like this:

$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');

This has the benefit of working on display: none elements so you don't need the extra two lines of code.

Solution 3

Another way to do simultaneous animations if you want to call them separately (eg. from different code) is to use queue. Again, as with Tinister's answer you would have to use animate for this and not fadeIn:

$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...

$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');

Comments

[Noldorin]

+1. However, $('.tooltip').show() is a better alternative to $('.tooltip').css('display', 'block');.

[Armin Cifuentes]

What about IEs {filter:alpha(opacity=50);}? Does this take care of this option too?

[QMaster]

queue is powerful option, specially when working on animation effects, Thanks so much.