fadeIn과 animate를 동시에 어떻게합니까?

Question

jQuery 사용하기 기본 '툴팁'애니메이션을 생성하여 툴팁이보기에 페이드되고 수직으로 움직이는 작은 애니메이션으로 나타나게합니다.

$('.tooltip').fadeIn('slow'); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

그런 식이나 이런 방식으로 수행 :

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow'); 

애니메이션이 한 번에 하나씩 실행, 첫 번째 페이드 후 수직 애니메이션을

지금까지 나는이 있습니다 . 같은 시간에 두 가지 방법을 모두 사용할 수 있습니까?

Answer 1

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow'); 

그러나,이 (fadeIn이처럼) display: none 요소에서 작동 표시되지 않습니다. 그래서, 당신이 사전을 둘 필요가 있습니다. (예를 들어, 다른 코드에서)

$('.tooltip').css('display', 'block'); 
$('.tooltip').animate({ opacity: 0 }, 0); 

Answer 2

또 다른 방법을 동시에 애니메이션을 할 당신이 개별적으로 호출 할 경우 queue을 사용하는 것입니다. 다시 말하지만, Tinister의 대답처럼이 아니라 fadeIn에 대한 애니메이션을 사용하는 것 : 아직 몇 년을 찾는 사람들을 위해

$('.tooltip').css('opacity', 0); 
$('.tooltip').show(); 
... 

$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'}); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

Answer 3

나중에 상황이 조금 변경되었습니다.

$('.tooltip').fadeIn({queue: false, duration: 'slow'}); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

이 당신이 코드의 추가로 두 줄 필요가 없습니다 display: none 요소 작업의 이점이 있습니다 : 그것은 다음과 같이 작동 할 수 있도록 당신은 지금뿐만 아니라 queue.fadeIn()을 위해 사용할 수 있습니다.