코드랩 레퍼런스

.fadeIn() 본문

JQUERY

.fadeIn()

webstoryboy 2018. 1. 28. 13:11

Definition

  • .fadeIn() 메서드는 선택한 요소를 천천히 보여줍니다.

Syntax

$("selector").fadeIn()

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.fadeIn()

Sample1 클릭하면 이미지가 나타나는 예제입니다.

효과(Effect)

  • 1
  • 2
  • 3
  • 4
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
			.list {overflow: hidden; min-height: 200px;}
			.list li {float: left; width: 32.3333%; margin:0.5%; list-style: none; position: relative; display:none;}
			.list li img {width: 100%; display: block; }
			.list li em {display:block; width: 20px; height: 20px; background-color: #ec407a; color: #fff; font-size: 12px; position: absolute; left: 5px; top:5px; border-radius: 50%; text-align: center; line-height: 22px;}
		</style>
	</head>
	<body>
		<h3 class="h3">효과(Effect)</h3>
		<div class="list">
			<ul>
				<li class="one1"><em>1</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img01.jpg" width="200"></li>
				<li class="one2"><em>2</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img02.jpg" width="200"></li>
				<li class="one3"><em>3</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img03.jpg" width="200"></li>
				<li class="one4"><em>4</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img04.jpg" width="200"></li>
			</ul>
		</div>

		<div class="btn">
			<ul>
				<li><input type="radio" name="radio" id="ex1" value="1"><label for="ex1">$(".one1").show();</label></li>
				<li><input type="radio" name="radio" id="ex2" value="2"><label for="ex2">$(".one2").fadeIn();</label></li> 
				<li><input type="radio" name="radio" id="ex3" value="3"><label for="ex3">$(".one3").slideDown();</label></li> 
				<li><input type="radio" name="radio" id="ex4" value="4"><label for="ex4">$(".list li").hide();</label></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			var btn = $(".btn > ul > li > input");	
			
			btn.click(function(){
				var num = $(this).attr("value");
				$("*").removeClass("on");
				
				if(num == 1){$(".one1").show();}
				if(num == 2){$(".one2").fadeIn();}
				if(num == 3){$(".one3").slideDown();}
				if(num == 4){$(".list li").hide();}
			});
		}); 
		</script> 
	</body>
</html>       

Sample2 클릭하면 이미지가 속도에 따라 나타나는 예제입니다.

효과(Effect)

  • 1
  • 2
  • 3
  • 4
  • 5
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
			.list2 {overflow: hidden;}
			.list2 li {float: left; width: 19%; margin:0.5%; min-height: 150px; list-style: none; position: relative;}
			.list2 li img {width: 100%; display:none;}
			.list2 li em {display:block; width: 20px; height: 20px; background-color: #ec407a; color: #fff; font-size: 12px; position: absolute; left: 5px; top:5px; border-radius: 50%; text-align: center; line-height: 22px;}
		</style>
	</head>
	<body>
		<h3 class="h3">효과(Effect)</h3>
		<div class="list2">
			<ul>
				<li class="one1"><em>1</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img01.jpg" width="200"></li>
				<li class="one2"><em>2</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img02.jpg" width="200"></li>
				<li class="one3"><em>3</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img03.jpg" width="200"></li>
				<li class="one4"><em>4</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img04.jpg" width="200"></li>
				<li class="one5"><em>5</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img05.jpg" width="200"></li>
			</ul>
		</div>

		<div class="btn btn2">
			<ul>
				<li><input type="radio" name="radio" id="ex10" value="1"><label for="ex10">$(".list2 .one1 img").fadeIn();</label></li> 
				<li><input type="radio" name="radio" id="ex11" value="2"><label for="ex11">$(".list2 .one2 img").fadeIn("slow");</label></li>
				<li><input type="radio" name="radio" id="ex12" value="3"><label for="ex12">$(".list2 .one3 img").fadeIn("normal");</label></li>
				<li><input type="radio" name="radio" id="ex13" value="4"><label for="ex13">$(".list2 .one4 img").fadeIn("fast");</label></li>
				<li><input type="radio" name="radio" id="ex14" value="5"><label for="ex14">$(".list2 .one5 img").fadeIn(2000);</label></li>
				<li><input type="radio" name="radio" id="ex15" value="6"><label for="ex15">$(".list2 img").fadeOut();</label></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			var btn2 = $(".btn2 > ul > li > input");	
			
			btn2.click(function(){
				var num = $(this).attr("value");
				$("*").removeClass("on");
				
				if(num == 1){$(".list2 .one1 img").fadeIn();}
				if(num == 2){$(".list2 .one2 img").fadeIn("slow");}
				if(num == 3){$(".list2 .one3 img").fadeIn("normal");}
				if(num == 4){$(".list2 .one4 img").fadeIn("fast");}
				if(num == 5){$(".list2 .one5 img").fadeIn(2000);}
				if(num == 6){$(".list2 img").fadeOut();}
			});
		}); 
		</script> 
	</body>
</html>         

Sample3 클릭하면 이미지가 순차적으로 나타나는 예제입니다.

효과(Effect)

  • 1
  • 2
  • 3
  • 4
  • 5
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
			.list2 {overflow: hidden;}
			.list2 li {float: left; width: 19%; margin:0.5%; min-height: 150px; list-style: none; position: relative;}
			.list2 li img {width: 100%; display:none;}
			.list2 li em {display:block; width: 20px; height: 20px; background-color: #ec407a; color: #fff; font-size: 12px; position: absolute; left: 5px; top:5px; border-radius: 50%; text-align: center; line-height: 22px;}
		</style>
	</head>
	<body>
		<h3 class="h3">효과(Effect)</h3>
		<div class="list2">
			<ul>
				<li class="one1"><em>1</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img01.jpg" width="200"></li>
				<li class="one2"><em>2</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img02.jpg" width="200"></li>
				<li class="one3"><em>3</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img03.jpg" width="200"></li>
				<li class="one4"><em>4</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img04.jpg" width="200"></li>
				<li class="one5"><em>5</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img05.jpg" width="200"></li>
			</ul>
		</div>

		<div class="btn btn2">
			<ul>
				<li><input type="radio" name="radio" id="ex10" value="1"><label for="ex10">$(".list2 .one1 img").fadeIn();</label></li> 
				<li><input type="radio" name="radio" id="ex11" value="2"><label for="ex11">$(".list2 .one2 img").fadeIn("slow");</label></li>
				<li><input type="radio" name="radio" id="ex12" value="3"><label for="ex12">$(".list2 .one3 img").fadeIn("normal");</label></li>
				<li><input type="radio" name="radio" id="ex13" value="4"><label for="ex13">$(".list2 .one4 img").fadeIn("fast");</label></li>
				<li><input type="radio" name="radio" id="ex14" value="5"><label for="ex14">$(".list2 .one5 img").fadeIn(2000);</label></li>
				<li><input type="radio" name="radio" id="ex15" value="6"><label for="ex15">$(".list2 img").fadeOut();</label></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			var btn2 = $(".btn2 > ul > li > input");	
			
			btn2.click(function(){
				var num = $(this).attr("value");
				$("*").removeClass("on");
				
				if(num == 1){$(".list2 .one1 img").fadeIn();}
				if(num == 2){$(".list2 .one2 img").fadeIn("slow");}
				if(num == 3){$(".list2 .one3 img").fadeIn("normal");}
				if(num == 4){$(".list2 .one4 img").fadeIn("fast");}
				if(num == 5){$(".list2 .one5 img").fadeIn(2000);}
				if(num == 6){$(".list2 img").fadeOut();}
			});
		}); 
		</script> 
	</body>
</html>         

Share

Ad

Comments