jQuery
jQuery 애니메이션을 순차적으로 적용하기
InspiredJW
2012. 2. 20. 13:33
jQuery를 사용하면서
여러가지 애니메이션이나 동작을 수행할 때
순차적으로 일을 하게 하고 싶은데
이렇게 하게 되면 이 세 DIV 가 동시에 서서히 사라지는 애니메이션이 적용됩니다.
예제보기
하지만 만약 1, 2, 3이 순차적으로 애니메이션을 적용하고 싶다면
.queue() 를 활용하면 됩니다.
예제보기
이렇게 queue를 활용하면 필요에 따라 반드시 선행되어야 할 액션 이후에
다른 액션이나 처리를 .queue() 안에 넣어서 처리할 수 있습니다.
여러가지 애니메이션이나 동작을 수행할 때
순차적으로 일을 하게 하고 싶은데
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
$("#one").fadeOut();
$("#two").fadeOut();
$("#three").fadeOut();
이렇게 하게 되면 이 세 DIV 가 동시에 서서히 사라지는 애니메이션이 적용됩니다.
예제보기
하지만 만약 1, 2, 3이 순차적으로 애니메이션을 적용하고 싶다면
.queue() 를 활용하면 됩니다.
$("#one").fadeOut().queue(function() {
$("#two").fadeOut().queue(function() {
$("#three").fadeOut();
});
});
예제보기
이렇게 queue를 활용하면 필요에 따라 반드시 선행되어야 할 액션 이후에
다른 액션이나 처리를 .queue() 안에 넣어서 처리할 수 있습니다.