jQuery animate() 애니메이션 메소드
앞서본 보여준 애니메이션메소드가 있었다. jQuery hide, show ,fade 애니메이션 메소드
animate()는 간단하기도 하고 때로는 사용자정의에 따라 다양하게 이용될수 있다.사용법부터 보자.
animate()는 4개의 인자를 가진다.
- .css()와 비슷한 속성값
- 속도, 역시 1/1000초 단위
- 외부 플러그인(pulg-in)효과주기
- 콜백함수
이 네가지에서 속성값은 필수 이고 나머지는 지정안해도 무방하다. 예제를 보자.
$('#box').animate({ 'width':'500px',opacity:0.4});
위의 예제는 #box라는 아이디에접근하고 가로길이를 500px 그리고 투명도를 0.4로 하게한다.이번엔 여기에 속도를 줘 보자
$('#box').animate({ 'width':'500px',opacity:0.4},200);
200이라고 속도를 주었다.200/1000초 빠르기로 애니메이션이 실행된다.하나더 자세한에제를 보겠다.원래주어진 사각형을 클릭시 크기변환시키는 애니메이션이다.
어쩌고 저쩌고
css에서 박스 크기를 지정해주었다 색은 #ff
#box{ width:300px; height:200px; background:#fcc;}
이제 클릭시 크기가 변환하도록 하면된다.
$(document).ready(function(){
$('p a').click(function(){
//엘리먼트 p a에 접근,그리고 클릭시 이벤트 발생
$('#box').animate(
{'width':'500px','height':'300px',opacity:0.4},1000
);
//발생하는이벤트.#box 아이디의 엘리먼트의 속성
//가로가 500px 세로는 300px로 늘어나고 투명도는 0.4
// 그리고 1초의속도로 애니메이션이전개된다.
});
});
이벤트 순차적 효과
앞서본예제대로 하면 css에서 정해준 크기의 분홍색사각형이 가로세로 동시에 늘어나면서 효과가 적용될것이다. 그러면 예로 가로먼저 늘어나고 세로 늘어나도록 여러효과를 순차적으로 일어나게할려면 어떻게 해야하는지 알아보자.
$('#boxSec').animate({ 'width':'500px',opacity:0.4},1000)
.animate({'height':'300px'},1000);
위의 예제는 첫번째애니메이션 가로로늘어나는 것이 먼저 실행되고 그리고 두번째 애니메이션 세로로 늘어나게 된다.이런 순차적이것은 애니메이션메소드에서 어디든지 적용된다.
또다른 .animate() 정의 그리고 queue
첫번째에서 설명한것말고도 도다른 .animate정의법이있다.
$('#box').animate({'width':'500px',opacity:0.4},{duration:1000,pulg-in,queue:false});
위같은 경우는 {효과},{duration(속도),플러그인,queue}부분류로 기본과 옵션을 나누어 준모습이다.주요시 여길점은 queue이다.
일반적으로 여러 애니메이션을 적용하면 순차적으로 일어난다.하지만.animate()에서 queue의값을 false로 할경우 동시에 일어나게된다.예제소스를 보자 .animate메소드를 순차적으로 썼지만 queue:false로 동시에 일어나게 된다
$('p#buttonThr a').click(function(){
$('#boxThr').animate({ 'width':'200px',opacity:0.4},1000)
.animate({'height':'100px'},{duration:1000,queue:false});
});
세가지에대해서 설명했다 요약하자면
- 일반적인 .animate()메소드 사용방법
- 순차적 사용방법
- queue:false를 이용한 동시간대 효과
각각예제는 여기서 볼수있다.http://sianasiatiger.cafe24.com/study/J_animate.html
댓글