jquery animate 사용예

jquery animate 사용예

.animate() 함수를 이용하면 html Element 상의 객체 움직임을 부여할 수 있다.

반드시 CSS 속성 맵 데이터와 함께 사용한다.

움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용한다.

즉, width, height, left, margin 등에 이용할 수 있지만 color같은 값에는 사용할 수 없다.

.animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery 

Duration은 지속시간이며, complete에는 콜백 함수를 지정해서, 애니메이션 동작 이후 함수를 실행할 수 있다.

단, 이 함수에는 인자값을 넘겨 줄 수는 없다.

• .animate( properties [, duration] [, easing] [, complete] )
• properties 움직임을 만들어 낼수 있는 CSS 속성들
• duration 움직임이 발생할 시간
• easing 움직임에 변화를 줄 수 있는 함수
• complete 움직임이 멈춘 후 실행될 함수
• .animate( properties, options )
• properties 움직임을 만들어 낼수 있는 CSS 속성들
• options A map of additional options to pass to the method. Supported keys:
• duration: 움직임이 발생할 시간
• easing: 움직임에 변화를 줄 수 있는 함수
• complete: 움직임이 멈춘 후 실행될 함수
• step: 움직임 각 스텝별로 실행될 함수
• queue: 애니메이션 효과는 순서대로 발생합니다. 만약 false로 하면 동시에 같이 움직임이 일어납니다.
• specialEasing: CSS 속성의 하나 이상을 특별한 효과로 처리합니다. (added 1.4).

 

좌측 메뉴가 서서히 닫히게 하는 제이쿼리다.

기본 적으로 가장 간단한 방법이다.

$(document).ready(function(){
	// LNB 메뉴 접는 기능
	$('#menu_menuFix').click(function(){
		var menuInitC = $('#menuInit').attr("value");
		var timeToAnimate = 100;
		if(menuInitC==0) { 
			$('.lnb').animate({width:"240px"},timeToAnimate);
			$('#menuInit').val('1');
		} //if menu collapse then lanb width is 240px;
		else if (menuInitC==1) {
			$('.lnb').animate({width:"70px"},timeToAnimate);
			$('#menuInit').val('0');
		} //if menu collapse then lanb width is 70px;	
	}); 
});