당신은 어떻게 동시에 페이드와 애니메이션을합니까?

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');

그러나 이것은 작동하지 않는 것 같습니다 display: none 요소 (AS fadeIn 하다). 따라서 미리 이것을 넣어야 할 수도 있습니다.

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

Answer 2

몇 년이 지난 지금도 여전히 사람들에게는 상황이 조금 바뀌 었습니다. 이제 사용할 수 있습니다 queue ~을 위한 .fadeIn() 다음과 같이 작동하도록하십시오.

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

이것은 작업의 이점이 있습니다 display: none 요소하므로 두 줄의 코드가 필요하지 않습니다.

Answer 3

별도로 호출하려면 동시 애니메이션을 수행하는 또 다른 방법 (예 : 다른 코드에서) queue. 다시 말하지만, Tinister의 대답과 마찬가지로 당신은 이것에 대한 애니메이션을 사용해야하고 페이드 인이 아닙니다.

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

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