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

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