[jquery] How do you fadeIn and animate at the same time?

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?

This question is related to jquery effects jquery-animate fadein

The answer is


$('.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);

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.


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

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to effects

Blurring an image via CSS? jQuery animate scroll jQuery "blinking highlight" effect on div? How do you fadeIn and animate at the same time? jQuery using append with effects jQuery slide left and show

Examples related to jquery-animate

jQuery .scrollTop(); + animation CSS rotation cross browser with jquery.animate() jquery toggle slide from left to right and back How to animate CSS Translate jQuery animate margin top animating addClass/removeClass with jQuery Animate scroll to ID on page load Change text (html) with .animate jquery animate background position Animate element to auto height with jQuery

Examples related to fadein

CSS how to make an element fade in and then fade out? Android fade in and fade out with ImageView jQuery fade out then fade in How do you fadeIn and animate at the same time? jQuery How do you get an image to fade in on load?