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 · Accepted 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

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

[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