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

How do you fadeIn and animate at the same time?


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