Javascript & JQuery & CSS

이번 장에서는 jQuery 에서 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 함수에 대해서 알아보겠습니다.
 fade의 사전적인 의미는 "천천히 사라지다" , "점점 희미해지다" 라는 뜻입니다.
그럼 대충 어떤 현상이 일어나겠구나 하는 짐작은 할 수 있을 겁니다.

1. fadeIn()

fadeIn() 함수는 천천히 나타나게 하는 함수 입니다.

    

		$("button").click(function() {
			$("#div1").fadeIn();
			$("#div2").fadeIn("slow");
			$("#div3").fadeIn(3000);
		});

	
	2. fadeOut()
	
 		fadeOut() 함수는 천천히 사라지게 하는 함수 입니다.

  

		$("button").click(function() {
			$("#div1").fadeOut();
			$("#div2").fadeOut("slow");
			$("#div3").fadeOut(3000);
		});

	
	3. fadeToggle()
	

	Toggle()은 (hide,show), (in,out) 의 기능을 동시해 수행하는 함수 입니다. 그래서 fadeToggle()은 천천히 사라지고 나타나는 현상을 반복적으로 수행합니다.
	

			$("button").click(function(){
				$("#div1").fadeToggle();
				$("#div2").fadeToggle("slow");
				$("#div3").fadeToggle(3000);
			});

	
	4. fadeTo()
	
		adeTo() 함수는 투명도를 조절하여 움직임을 만들어 내는 함수입니다. 그리고 fadeTo() 함수는 다른 함수와 다르게 반드시 시간을 명시해 주어야 합니다. 

		

			$("button").click(function(){
				$("#div1").fadeTo("slow",0.15);
				$("#div2").fadeTo("slow",0.4);
				$("#div3").fadeTo("slow",0.7);
			});

	각각의 색상이 0.15, 0.4, 0.7 만큼 fade 현상이 일어난 모습을 확인 할 수 있습니다.