Class07(이펙트 효과)

2022-06-24 5 분 소요

2022. 06. 23. 수업내용 정리

이펙트 효과.. 요소의 숨김, 표시.. 페이드.. 슬라이드.. 제어

요소의 숨김과 표시

이펙트 효과

제이쿼리는 웹 페이지에 이펙트 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공합니다.

이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있습니다.

요소의 숨김과 표시

.hide() 메소드는 선택한 요소를 순간적으로 사라지게 하고, .show() 메소드는 나타나게 합니다.

.hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정됩니다.

즉, 이렇게 숨겨진 요소는 더는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 됩니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Effects</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#showBtn").on("click", function() {
				$("#text").show();	// id가 "text"인 요소를 나타나게 함.
			});
			$("#hideBtn").on("click", function() {
				$("#text").hide();	// id가 "text"인 요소를 숨김.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>요소의 표시와 숨김</h1>
	<button id="showBtn">요소 표시하기!</button>
	<button id="hideBtn">요소 숨기기!</button>
	<p>CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!</p>
	<p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    	
</body>
    
</html>

웹페이지 화면 ▼

숨김생성예시1

★ CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있습니다.
하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 주게 됩니다.

인수로 밀리초에 해당하는 숫자나 “slow”, “fast” 등의 예약어를 전달하여, 이펙트 효과의 속도를 조절할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Effects</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#showBtn").on("click", function() {
				$("#text").show(2000);		// id가 "text"인 요소를 2초에 걸쳐 나타나게 함.
			});
			$("#hideBtn").on("click", function() {
				$("#text").hide("fast");	// id가 "text"인 요소를 빠르게 숨김.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>요소의 표시와 숨김 속도 조절</h1>
	<button id="showBtn">요소 표시하기!</button>
	<button id="hideBtn">요소 숨기기!</button>
	<p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    	
</body>
    
</html>

웹페이지 화면 ▼

숨김생성예시

요소의 표시 상태 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .toggle() 메소드를 사용할 수 있습니다.

선택한 요소가 현재 사라진 상태라면 .show() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .hide() 메소드의 동작을 수행합니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Effects</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#toggleBtn").on("click", function() {
				$("#text").toggle("slow");	// id가 "text"인 요소를 느리게 나타나게 하거나 숨김.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>요소의 표시 상태 토글</h1>
	<button id="toggleBtn">요소 표시 토글</button>
	<p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
    	
</body>
    
</html>

웹페이지 화면 ▼

숨김생성예시

페이드(fade) 효과

제이쿼리에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다.

이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.
1. .fadeIn()
2. .fadeout()
3. .fadeTo()
4. .fadeToggle()

페이드 인(fade in)과 페이드 아웃(fade out)

.fadeIn() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Fade Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid orange;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#fadeInBtn").on("click", function() {
				$("#divBox").fadeIn();	// id가 "divBox"인 요소를 점점 나타나게 함.
			});
			$("#fadeOutBtn").on("click", function() {
				$("#divBox").fadeOut();	// id가 "divBox"인 요소를 점점 사라지게 함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>페이드 인과 페이드 아웃</h1>
	<button id="fadeInBtn">페이드 인</button>
	<button id="fadeOutBtn">페이드 아웃</button>
	<div id="divBox"></div>
	<p>제이쿼리에서 페이드 효과는 CSS opacity 속성값을 빠르게 변경하여 표현해요!</p>
    	
</body>
    
</html>

웹페이지 화면 ▼

페이드예시

위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지의 레이아웃에서 완전히 사라지게 됩니다.

인수로 밀리초에 해당하는 숫자나 “slow”, “fast” 등의 예약어를 전달하여, 페이드 효과의 속도를 조절할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Fade Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid orange;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#fadeInBtn").on("click", function() {
				$("#divBox").fadeIn("slow");	// id가 "divBox"인 요소를 느리게 점점 나타나게 함.
			});
			$("#fadeOutBtn").on("click", function() {
				$("#divBox").fadeOut(2000);		// id가 "divBox"인 요소를 2초에 걸쳐 점점 사라지게 함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>페이드 효과의 속도 조절</h1>
	<button id="fadeInBtn">페이드 인</button>
	<button id="fadeOutBtn">페이드 아웃</button>
	<div id="divBox"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

페이드예시

페이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle() 메소드를 사용할 수 있습니다.

선택한 요소가 현재 사라진 상태라면 .fadeIn() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut() 메소드의 동작을 수행합니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Fade Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid orange;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#fadeToggleBtn").on("click", function() {
				// id가 "divBox"인 요소를 1초에 걸쳐 점점 나타나게 하거나 사라지게 함.
				$("#divBox").fadeToggle(1000);
			});
		});
	</script>
</head>
    
<body>
    
	<h1>페이드 효과의 토글</h1>
	<button id="fadeToggleBtn">페이드 효과 토글</button>
	<div id="divBox"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

페이드예시

페이드 효과의 투명도 설정

.fadeTo() 메소드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Fade Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid orange;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#fadeBtn").on("click", function() {
				// id가 "divBox_01"인 요소를 2초에 걸쳐 opacity 속성값을 0.2까지만 변경시킴.
				$("#divBox_01").fadeTo(2000, 0.2);
				// id가 "divBox_02"인 요소를 2초에 걸쳐 opacity 속성값을 0.5까지만 변경시킴.
				$("#divBox_02").fadeTo(2000, 0.5);
				// id가 "divBox_03"인 요소를 2초에 걸쳐 opacity 속성값을 0.8까지만 변경시킴.
				$("#divBox_03").fadeTo(2000, 0.8);
			});
		});
	</script>
</head>
    
<body>
    
	<h1>페이드 효과의 투명도 설정</h1>
	<button id="fadeBtn">페이드 아웃</button>
	<div id="divBox_01"></div>
	<div id="divBox_02"></div>
	<div id="divBox_03"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

페이드예시

슬라이드(slide) 효과

제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현합니다.

이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.
1. .slideUp()
2. .slideDown()
3. .slideToggle()

슬라이드 업(slide up)과 슬라이드 다운(slide down)

.slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여줍니다.

또한, .slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Slide Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid green;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#slideUpBtn").on("click", function() {
				$("#divBox").slideUp();		// id가 "divBox"인 요소를 올라가면서 사라지게 함.
			});
			$("#slideDownBtn").on("click", function() {
				$("#divBox").slideDown();	// id가 "divBox"인 요소를 내려오면서 나타나게 함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>슬라이드 업과 슬라이드 다운</h1>
	<button id="slideUpBtn">슬라이드 업</button>
	<button id="slideDownBtn">슬라이드 다운</button>
	<div id="divBox"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

슬라이드 예시

인수로 밀리초에 해당하는 숫자나 “slow”, “fast” 등의 예약어를 전달하여, 슬라이드 효과의 속도를 조절할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Slide Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid green;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#slideUpBtn").on("click", function() {
				$("#divBox").slideUp(500);		// id가 "divBox"인 요소를 0.5초에 걸쳐 올라가면서 사라지게 함.
			});
			$("#slideDownBtn").on("click", function() {
				$("#divBox").slideDown(300);	// id가 "divBox"인 요소를 0.3초에 걸쳐 내려오면서 나타나게 함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>슬라이드 효과의 속도 조절</h1>
	<button id="slideUpBtn">슬라이드 업</button>
	<button id="slideDownBtn">슬라이드 다운</button>
	<div id="divBox"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

슬라이드 예시

슬라이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메소드를 사용할 수 있습니다.

선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행합니다.

<!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Slide Animation</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox {
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 5px solid green;
			margin-top: 20px;
		}
	</style>
	<script>
		$(function() {
			$("#slideToggleBtn").on("click", function() {
				// id가 "divBox"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 함.
				$("#divBox").slideToggle("fast");
			});
		});
	</script>
</head>
    
<body>
    
	<h1>슬라이드 효과의 토글</h1>
	<button id="slideToggleBtn">슬라이드 효과 토글</button>
	<div id="divBox"></div>
    	
</body>
    
</html>

웹페이지 화면 ▼

슬라이드 예시

Twitter Facebook LinkedIn

Class07(이펙트 효과)

2022. 06. 23. 수업내용 정리

이펙트 효과.. 요소의 숨김, 표시.. 페이드.. 슬라이드.. 제어

공유하기

댓글남기기

참고

Class01(pocker project with mfc)

Tip03

Class15(레이어)

Class06(트랜잭션)