jQuery w3schools 한글판 강좌39 - jQuery Effects -Animation -jQuery animate() -Uses Queue Functionality

 

jQuery animate() - Queue기능 이용하기

디폴트(기본) 값으로 jQuery 는 애니메이션(동작)에 대해 큐 기능을 가집니다.

즉, 만일 여러분이 여러개의  animate() 을 연이어서 부른다면,  

jQuery는 이러한 메소드의 호출에 내부의 큐를 생성합니다.

그러면 그것은 동작 콜들을 하나씩 실행합니다.

 

따라서, 만일 당신이 서로다른 동작들을 차례로 수행하기를 원하면,  

우리는 큐 기능의 잇점을 활용합니다.

 

Example 1

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});   

 

아래예는 처음에는 <div>요소를 우측으로 움직이며, 그리고 글자크기를 증가 시킵니다 :

Example 2

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});