회원가입아이디/비번찾기
홈으로


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

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


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




관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>

<body>
<p>fadeIn 현상을 확인해보세요!</p>
<button>fadeIn 버튼을 클릭하세요</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

// 우선 기본적으로 fadeIn()을 사용하며, 괄호() 안에 위처럼 옵션을 줄 수 있습니다.


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


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




관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>

<body>
<p>fadeOut 현상을 확인해보세요!</p>
<button>fadeOut 버튼을 클릭하세요</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

// 우선 기본적으로 fadeOut()을 사용하며, 괄호() 안에 위처럼 옵션을 줄 수 있습니다.



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

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




관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>

<p>fadeToggle()의 현상이 무엇인지 확인해보세요.</p>
<button>fadeToggle 클릭하세요</button>
<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>



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

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

// 0은 0초를 의미하며, 0.15는 1초에서 15%를 의미하며 1초가 100 이라 할 경우 100분의 15 의 시간을 의미합니다. 150 milliseconds 입니다. 마찬가지로 0.4, 0.7 의 의미를 같이 생각하면 되겠습니다.




관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>

<body>
<p>fadeTo()에 대해서 알아 보겠습니다.</p>
<button>fadeTo 클릭하세요</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
추천추천 : 347 추천 목록
번호 제목
2,885
input 입력 필드 앞뒤 공백 실시간 제거
2,884
Placeholder 포커스시 감추기
2,883
MySQL 중복된 데이터를 삭제
2,882
MySQL 중복 데이터 확인
2,881
sessionStorage.getItem 와 sessionStorage.setItem
2,880
제이쿼리 랜덤으로 배경색 변경
2,879
preg match에 관한 정규식
2,878
Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER 환경 변수 정리
2,875
Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,874
iframe 사용시 하단에 발생하는 공백 제거방법
2,873
아이프레임(iframe) 전체화면 가능하게 하기
2,872
부트스트랩(bootstrapk)에서 사용하는 class명 정리
2,871
부트스트랩 CSS
2,870
크롬에서 마진 조절
2,869
PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
2,868
PHP preg match all()
2,867
PHP 로 웹페이지 긁어오기 모든 방법 총정리!
2,866
[PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
2,865
PHP 함수 정리
2,864
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
2,863
PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
2,862
PHP 정규식 정리
2,861
PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
2,860
php 크롤링 또는 파싱 함수, 정규식 모음
2,859
제이쿼리 기본 명령어
2,858
웹페이지 가로 모드세로 모드 인식하기
2,857
모바일 웹 화면 강제 회전(가로모드 고정)
2,856
[HTML5]에서 frameset 대체 방법과 iframe 속성
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.