How do you fadeIn and animate at the same time?
JqueryEffectsJquery AnimateFadeinJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
$('.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 - Jquery
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 - Jquery
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');