테스트 사이트 - 개발 중인 베타 버전입니다

js jquery 애니메이션 실행 후 애니메이션 실행 채택완료

그누보드이해하기 4년 전 조회 2,094

jquery 에서 addclass를 줘서 애니메이션을 실행하려고 하는데

첫번째 애니메이션은 안보이는 곳에서 박스 올라오고

두번째 애니메이션은 첫번째에서 올라온 박스가 내려갑니다.

첫번째는 빠르게 올라오고

두번째는 첫번째에서 올라온 박스를 4초정도 유지하고 내려갑니다.

 

첫번째 애니메이션이 전부 끝나고 두번째 애니메이션을 실행시키는 방법은 없을까요?

</p>

<p>checkDate.addClass("showUp").removeClass("showOut");</p>

<p>checkDate.addClass("showOut").removeClass("showUp");</p>

<p>

이렇게 하면 둘이 동시에 실행되서 원하는 대로 실행이 안됩니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
4년 전

자바스크립트는 순차적 실행을 하지 않습니다.
순차적, 또는 일정 시간 후에 실행시키고 싶다면
setTimeout, promise async await, callback 등을 활용하세요.
 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그누보드이해하기
4년 전
진짜 감사합니다 드뎌 해결했어요.
setTimeout으로 해결했습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전

css에서 해당 클래스에 animation-delay를 사용해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그누보드이해하기
4년 전
그건 애니메이션 2개가 반대로 작용할 경우 무용지물입니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인