당신은 어떻게 동시에 페이드와 애니메이션을합니까?
-
22-07-2019 - |
문제
jQuery를 사용하면 기본 '툴팁'애니메이션을 만들어 도구 팁이 작은 애니메이션으로 표시되어 수직으로 움직일뿐만 아니라 사라지는 작은 애니메이션으로 나타납니다.
지금까지 나는 이것을 가지고있다 :
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
그런 식으로 또는 이런 식으로 :
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
애니메이션은 한 번에 하나씩, 페이드는 먼저 실행 된 다음 수직 애니메이션을 실행합니다. 둘 다 동시에 할 수있는 방법이 있습니까?
해결책
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
그러나 이것은 작동하지 않는 것 같습니다 display: none
요소 (AS fadeIn
하다). 따라서 미리 이것을 넣어야 할 수도 있습니다.
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
다른 팁
몇 년이 지난 지금도 여전히 사람들에게는 상황이 조금 바뀌 었습니다. 이제 사용할 수 있습니다 queue
~을 위한 .fadeIn()
다음과 같이 작동하도록하십시오.
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
이것은 작업의 이점이 있습니다 display: none
요소하므로 두 줄의 코드가 필요하지 않습니다.
별도로 호출하려면 동시 애니메이션을 수행하는 또 다른 방법 (예 : 다른 코드에서) queue
. 다시 말하지만, Tinister의 대답과 마찬가지로 당신은 이것에 대한 애니메이션을 사용해야하고 페이드 인이 아닙니다.
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
제휴하지 않습니다 StackOverflow