jQuery w3schools 한글판 강좌39 - jQuery Effects -Animation -jQuery animate() -Uses Queue Functionality 정보
jQuery jQuery w3schools 한글판 강좌39 - jQuery Effects -Animation -jQuery animate() -Uses Queue Functionality본문
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");
});
0
댓글 0개