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

User · Answer

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.

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to effects

Examples related to jquery-animate

Examples related to fadein