24. (jquery/제이쿼리) animate 애니메이션 사용 방법 정의 및 속성 종류 설명

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>


    <!-- 내부 JS 스타일 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
    	2. 제이쿼리에서는 animate() 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있습니다
    	3. animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다
    	4. animate 사용 가능 속성 : 
    		backgroundPositionX / backgroundPositionY / borderWidth / borderBottomWidth / borderLeftWidth / 
    		borderRightWidth / borderTopWidth / borderSpacing / margin / marginBottom / marginLeft / 
    		marginRight / marginTop / outlineWidth / padding / paddingBottom / paddingLeft / paddingRight / 
    		paddingTop / height / width / maxHeight / maxWidth / minHeight / minWidth / fontSize / 
    		bottom / left / right / top / letterSpacing / wordSpacing / lineHeight / textIndent / 	
    	*/


    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	$(window).load(function(){
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");
    	});	



    	/* 이벤트 함수 정의 */
    	function One_Animation(){
    		console.log("");
    		console.log("[One_Animation] : [start]");
    		console.log("");

    		$("#div_one_container").css("backgroundColor", "#ff0000"); // 백그라운드 색상은 css 로 변경
    		$("#div_one_container").animate(
    			{ 
    				//1초간 애니메이션 진행    			
    				width : "100%"   				

    			}, 1000, function(){ //1초 애니메이션 완료 후
    				console.log("");
		    		console.log("[One_Animation] : [end]");
		    		console.log("");
		    		//$("#div_one_container").animate({ opacity : 1 }, 500); //다시, 애니메이션 변경 가능
    			}    		
    		);
    	};


    	/* 이벤트 함수 정의 */
    	function Two_Animation(){    		
    		console.log("");
    		console.log("[Two_Animation] : [start]");
    		console.log("");

    		// 애니메이션 수행 실시
    		$("#div_two_container").animate(
    			{
    				//1초간 애니메이션 진행    				
    				height : "50%",
    				opacity : 0.5

    			}, 1000, function(){ //1초 애니메이션 완료 후    				
    				console.log("");
		    		console.log("[Two_Animation] : [end]");
		    		console.log("");
		    		//$("#div_two_container").animate({ left : originalX, opacity : 1 }, 500); //다시, 애니메이션 변경 가능
    			}    		
    		);
    	};

    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

[적용 (전)]

​

​

[적용 (후)]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다

2. 제이쿼리에서는 animate() 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있습니다

3. animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다

4. animate 사용 가능 속성 :

    backgroundPositionX / backgroundPositionY / borderWidth / borderBottomWidth / borderLeftWidth /

    borderRightWidth / borderTopWidth / borderSpacing / margin / marginBottom / marginLeft /

    marginRight / marginTop / outlineWidth / padding / paddingBottom / paddingLeft / paddingRight /

    paddingTop / height / width / maxHeight / maxWidth / minHeight / minWidth / fontSize /

    bottom / left / right / top / letterSpacing / wordSpacing / lineHeight / textIndent /

*/

/* =========================== */