12. (jquery/제이쿼리) Jquery 특정 객체 다중 이펙트 효과 부여 및 연속 동작 실시

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

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

​

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

[소스 코드]

 

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


    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기)
    	2. $(객체).css(속성) : 특정 객체의 css 속성값을 확인합니다
    	3. fadeIn : 선택한 요소를 서서히 나타나게 합니다
    	4. fadeOut : 선택한 요소를 서서히 사라지게 합니다
    	5. slideUp : 선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 합니다
    	6. slideDown : 선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 합니다
    	7. delay : 애니메이션 전환 과정에서 정적 딜레이 값을 부여합니다
    	*/


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

    		// 특정 id 클릭 이벤트 
    		$("#one_container").on("click", function() {

    			//display 속성 값 확인 실시
    			var display = $("#two_container").css("display");
    			console.log("");
    			console.log("[two_container] : [display] : " + display);
    			console.log("");

    			if(display != "none"){ //숨김이 아닐 경우
    				console.log("");
    				console.log("[two_container] : [animation]");
    				console.log("");

    				// (깜박임 - 부드러움) : 0.5초간 사라짐 효과 후 > 다시 1초간 표시 효과
    				$("#two_container").fadeOut(500).fadeIn(1000);

    				// (깜박임 - delay) : 0.5초간 사라짐 효과 후 > 1초간 대기 후 > 다시 1초간 표시 효과
    				$("#two_container").fadeIn(500).delay(1000).fadeOut(1000);

    				// (접었다가 > 다시 펼쳐짐) : 0.5초간 접었다가 > 다시 1초간 펼쳐짐 효과
    				$("#two_container").slideUp(500).slideDown(1000);

    			}    			
    		});	

    	});
    	
    </script>

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

​

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

[결과 출력]

​

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

​

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

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기)

2. $(객체).css(속성) : 특정 객체의 css 속성값을 확인합니다

3. fadeIn : 선택한 요소를 서서히 나타나게 합니다

4. fadeOut : 선택한 요소를 서서히 사라지게 합니다

5. slideUp : 선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 합니다

6. slideDown : 선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 합니다

7. delay : 애니메이션 전환 과정에서 정적 딜레이 값을 부여합니다

*/

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