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?

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