How do you fadeIn and animate at the same time?

jquery effects jquery-animate fadein
JayNCoke picture JayNCoke · Oct 30, 2009 · Viewed 109.9k times · Source

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?

Answer

Tinister picture Tinister · Oct 30, 2009 
$('.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);

Related questions

How can I execute multiple, simultaneous jquery effects?

I am animating some error/validation elements on a page. I want them to bounce and be highlighted, but at the same time if possible. Here's what I'm currently doing: var els = $(".errorMsg"); els.effect("bounce", {times: 5}, 100); els.effect("highlight", {…

Read More
Does jQuery have a plugin to display a "message bar" like the Twitter "wrong password" bar at the top of screen?

Twitter will pop down a message bar at the top of the screen say "Wrong password" and after 10 seconds, it will slide up and disappear. Chrome also shows "Do you want to save the password" message box using such a …

Read More
jQuery slide left and show

I extended the jQuery effects called slideRightShow() and slideLeftHide() with a couple functions that work similarly to slideUp() and slideDown() as seen below. However, I would also like to implement slideLeftShow() and slideRightHide(). I know there are substantial libraries that …

Read More