티스토리 뷰

WEB/jQuery

[jQuery] Effects

춘햄 2021. 6. 7. 16:53

jQuery 는 JS보다 좀 더 다양한 시각적 효과들을 좀 더 쉬운 방법으로 사용이 가능하다.

대표적으로 쓰이는 몇 가지 효과를 예제와 함께 알아보도록 하자

1. show & hide : show(), hide() 함수를 이용하면, 특정 요소를 보이거나 숨길 수 있으며, 괄호 내에 "slow", "fast", "수치" 등을 입력하여 show & hide 속도를 조절할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서서히 보이기 및 숨기기</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 보여질 요소.show() 
		// 감춰질 요소.hide() 
		
		$('.region').show();
		$('#moreRegion').hide();
		
		$('span.more').click(function() {
			$('#moreRegion').show('slow'); // 속도: 1000 = 1초
		});
		
	});
</script>

</head>

<body>

	<div class="region" style="display: none;">
		안녕하세요. 여기는 본문입니다. <span class="more">more...</span>
	</div>

	<div id="moreRegion" style="height: 100px; background-color: Yellow;">
		또 만나요
	</div>

</body>

</html>

2. fadeIn() & fadeOut(): 서서히 나타내기 & 서서히 사라지기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서서히 보이기 및 숨기기</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}

div {
	background-color: Silver;
	height: 100px;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			$('#first').fadeIn(3000);
			$('#second').fadeOut(3000);	
		})
	});
</script>

</head>

<body>

	<input type="button" id="btn" value="페이드 효과 주기" />
	<div id="first" style="display: none; background-color: Yellow;">
		첫번째 영역
	</div>

	<div id="second">또 만나요</div>

</body>

</html>

3. slideUp: 말 그대로 슬라이드하며 올라오거나 내려감

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>슬라이드업</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			$('#first').fadeIn('slow').slideUp('slow');
		})
	});
</script>

</head>

<body>

	<input type="button" id="btn" value="슬라이드 업" />

	<div id="first" style="display: none; background-color: Yellow; height: 100px;">
		첫번째 영역
	</div>

	<div id="second">두번째 영역</div>

</body>

</html>

4. animate() : 여러가지 효과를 동시에 map 형태로 적용 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여러가지 효과 동시 처리</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		//animate() : 여러가지 효과를 동시에 적용할 때, 맵 형태로 값을 설정
		// 적용 대상.animate({  }, 시간)
		$('#moreRegion').hide();
		
		$('span.more').click(function() {
			$('#moreRegion').animate(
				{
					height:'200px',
					width:'200px',
					opacity:'show'
				}, 'slow'		
			)
		});
	});
</script>

</head>

<body>

	<div class="region">
		안녕하세요. 여기는 본문입니다. <span class="more">more...</span>
	</div>

	<div id="moreRegion" style="height: 100px; background-color: Yellow;">
		또 만나요
	</div>

</body>

</html>

5. stop(): animate() 함수를 일시 정지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 멈추기</title>

<style type="text/css">
div {
	position: absolute;
	background-color: #abc;
	left: 0px;
	top: 50px;
	width: 60px;
	height: 60px;
	margin: 5px;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#go').click(function() {
			$('.block').animate(
				{
					left: '+=100px',
					top: '+=100px'					
				}, 2000
			);
		});
		
		$('#stop').click(function() {
			$('.block').stop();
		});
		
		$('#back').click(function() {
			$('.block').animate(
					{
						left: '-=100px',
						top: '-100px'
					}, 2000
			);
		
		});
	});
</script>

</head>

<body>

	<button id="go">Go</button>
	<button id="stop">STOP!</button>
	<button id="back">Back</button>
	<div class="block"></div>

</body>

</html>

6. 메뉴 확장 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #DDD;
}

.menu>div {
	padding: 2%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	// JavaScript 함수 선언
	
	function showSubMenu(strId) {
		var lySubMenu = $(strId);
		
		if(lySubMenu.first().is(":hidden")){
			$(strId).slideDown(300);
		} else {
			$(strId).slideUp(300);
		}
	}
	
	$(document).ready(function() {
		$('.menu_2').hide();
	});
</script>
</head>

<body>
	<div class="menu">
		<div>
			메뉴 1
			<button onclick="showSubMenu('#sub1')"> + </button>
			<div class="menu_2" id="sub1">
				<div>메뉴 1-1</div>
				<div>메뉴 1-2</div>
			</div>
		</div>
		
		<div>메뉴 2</div>
	</div>
</body>
</html>

'WEB > jQuery' 카테고리의 다른 글

[jQuery] 비동기식 페이지 로드, load()  (0) 2021.06.07
[jQuery] 동적으로 요소 추가  (0) 2021.06.07
[jQuery] Traversing  (0) 2021.06.07
[jQuery] bind & unbind  (0) 2021.06.07
[jQuery] 다양한 Selector 이용  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more