Inspired World

jQuery 애니메이션을 순차적으로 적용하기 본문

jQuery

jQuery 애니메이션을 순차적으로 적용하기

InspiredJW 2012.02.20 13:33
jQuery사용하면서

여러가지 애니메이션이나 동작을 수행할 때

순차적으로 일을 하게 하고 싶은데
 

<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() 안에 넣어서 처리할 수 있습니다.




0 Comments
댓글쓰기 폼