Javascript & JQuery & CSS

animate() 함수는 css 속성들을 이용하여 사용자 애니메이션을 수행 하는 것 입니다.

대신 비수치형 속성값들로는 애니메이션 효과를 줄 수 없습니다. 예를 들어 width,height,left 와 같은 수치형은 제어가 가능하고,

background-color 와 같은 것은 사용이 불가능 합니다.

스타일 속성 뿐만 아니라, 비 스타일 속성들(scrollTop, scrollLeft, 그리고 사용자 정의 속성 같은) 들도 애니메이션 효과에 사용할 수 있습니다.

수치는 픽셀단위로 제어 할 수 있고 , em 과 %같은 값들도 지원 합니다. 그리고 더불어 'show', 'hide', 'toggle'과 같은 문자열도 사용할 수 있습니다.

.animate( properties [, duration] [, easing] [, complete] )
--------------------------------------------------------------------------------
properties : 움직임을 만들어 낼수 있는 CSS 속성들 duration : 움직임이 발생할 시간
easing : 움직임에 변화를 줄 수 있는 함수 complete : 움직임이 멈춘 후 실행될 함수
animate( properties, options )
--------------------------------------------------------------------------------
properties : 움직임을 만들어 낼수 있는 CSS 속성들
duration: 움직임이 발생할 시간
easing: 움직임에 변화를 줄 수 있는 함수
complete: 움직임이 멈춘 후 실행될 함수
step: 움직임 각 스텝별로 실행될 함수
queue: 애니메이션 효과는 순서대로 발생합니다. 만약 false로 하면 동시에 같이 움직임이 일어납니다.
specialEasing: CSS 속성의 하나 이상을 특별한 효과로 처리합니다. (added 1.4).
 
 button 객체를 클릭하게되면 #effect 객체에 .animate() 함수가 호출되어 width:500 이 실행됩니다.

opacity:0.3 도 실행되어 투명도가 흐려지게 됩니다.

1초동안 실행됩니다.

한번 더 클릭할 경우 width:240 이 실행됩니다.


아래  버튼을 누르시면 두번째 애니메이션 효과를 볼 수 있습니다.
 

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

위의 소스는 두번째 애니메이션 효과의 Jquery 소스 입니다.

button1 을 클릭할 경우 발생되는 이벤트로, 여러가지의 효과를 연결시켜서 처리하는 예제 입니다.
 

	  // 애니메이션 시작
	  $("#start").click(function(){
		$("#ani_div3").animate({left:500,,height:150},5000);
		$("#ani_div3").animate({fontSize:'5em'},5000);
	  });

	  // 애니메이션 중지
	  $("#stop").click(function(){
		$("#ani_div3").stop();
	  });

	  // 모든 애니메이션 중지
	  $("#stop2").click(function(){
		$("#ani_div3").stop(true);
	  });

	  // 모든 애니메이션 중지 및 최종상태로 변경

	  $("#stop3").click(function(){
		$("#ani_div3").stop(true,true);
	  });