[자바스크립트] Fade In & Fade Out

HTML 소스

<button id="btnfadeOut"> Fade Out</button>
<button id="btnfadeIn"> Fade In</button>
<div id="img1">글자가 이쁘게 사라진다.</div>

자바 스크립트 소스 

<script type="text/javascript">
	var opacity =0;
	var intervalID=0;
	 

	//순수 자바스크립트 클릭 이벤트 Fsade out 실행
	document.getElementById('btnfadeOut').addEventListener('click', function() {
		intervalID = setInterval(hide,200);
	});
    
	//순수 자바스크립트 클릭 이벤트 Fade in
	document.getElementById('btnfadeIn').addEventListener('click', function() {
		intervalID = setInterval(show,200);
	});
 
	function hide(){
		var div = document.getElementById("img1");
		opacity = Number(window.getComputedStyle(div).getPropertyValue("opacity"));
		
		if(opacity>0){
            //Fade out 핵심 부분
			opacity = opacity-0.1;
			div.style.opacity=opacity;
			//img.style.opacity=opacity;
		}
		else{
			clearInterval(intervalID);
		}
	}
	
	function show(){
		var div = document.getElementById("img1");
		opacity = Number(window.getComputedStyle(div).getPropertyValue("opacity"));
		
		if(opacity<1){
        	//Fade in 핵심 부분
			opacity = opacity+0.1;
			div.style.opacity=opacity;
			//img.style.opacity=opacity;
		}
		else{
			clearInterval(intervalID);
		}
	}	 
       
    </script>

 

출처: 유튜브 였는데 러시아 사람이 영어로 설명 하고 있었는데 주소는 기억이 안난다. 

       인터넷에 유사 소스 많으니 다른 형태를 원하시면 따로 검색을 추천 합니다.

       역시 구글신은 위대하다.