본문 바로가기
Front/JQuery

[JQuery-3.6.0] 효과-애니메이션(Animation) 처리

by 시월해 2021. 4. 29.

효과 관련 메서드

 * 콜백함수 : 효과가 완료되면 실행되는 함수. 생략 가능.


- hide() : 요소를 숨기는 기능.
형식) $("요소선택").show("효과속도(ms)", 콜백함수)

- show() : 숨겨져있던 요소를 노출시키는 기능.
 형식) $("요소선택").show("효과속도(ms)", 콜백함수)


- toggle() : 선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 하는 기능.
형식) $("요소선택").toggle("효과속도(ms)", 콜백함수)

 

- fadeIn() : 숨겨져있던 요소가 점점 투명해 지면서 노출이 되는 기능.
 형식) $("요소선택").fadeIn("효과속도(ms)", 콜백함수)


 - fadeOut() : 노출이 되어 있던 요소가 점점 사라지는(불투명) 기능.
 형식) $("요소선택").fadeOut("효과속도(ms)", 콜백함수)


 - fadeToggle() : 노출이 되어있던 요소는 점점 사라지고, 사라져있던 요소는 점점 선명해지면서 노출이 되는 기능.
 형식) $("요소선택").fadeToggle("효과속도(ms)", 콜백함수)

 

- fadeTo() : 선택한 요소를 지정한 투명도의 값까지만 숨기는 기능. 투명도는 0부터 1사이의 값까지만 입력할 수 있음.
형식) $("요소선택").fadeTo("효과속도", 투명도, 콜백함수);

 

- slideUp() : 선택한 요소를 숨길때 사용하는 메서드.
형식) $("요소선택").slideUp("효과속도", 콜백함수);


- slideDown() : 숨겨져 있는 요소를 나타내고자 할 때 사용하는 메서드.
형식) $("요소선택").slideDown("효과속도", 콜백함수);


- slideToggle : 요소가 나타나 있으면 숨기고, 숨겨져 있으면 나타내는 메서드.
형식) $("요소선택").slideToggle("효과속도", 콜백함수);

 

- animate(): 선택한 요소에 대한 다양한 동작(motion) 효과를 적용하는 메서드.
형식) $("요소선택").animate({애니메이션 속성},"효과속도", 콜백함수);

==> 애니메이션 속성에는 모션으로 적용할 속성을 css(스타일)을 이용해서 입력.
==> 효과속도는 ms(1/1000) 또는 "slow","normal", "fast"로도 가능.

 

- stop() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를 정지시키는 메서드.
형식) $("요소선택").stop()


- delay() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를 지연시키는 메서드.
형식) $("요소선택").delay(지연시간).애니메이션 효과 메서드();

요소 숨겼다가 보이기(토글)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").click(function() {
			$("h2").hide(1000, function () {
				alert("숨김이 완료 되었습니다.");
			});
		});
		
		$(".btn2").click(function() {
			$("h2").show(1000, function () {
				alert("노출이 완료되었습니다.");
			});
		});
		
		$(".btn").click(function() {
			$("img").toggle(1000);
		});
	});

</script>
</head>
<body>
	<button class="btn1">hide</button>
	<button class="btn2">show</button>
	<h2>효과 관련 내용</h2>
	
	<button class="btn">toggle</button>
	<br>
	<img src="images/beauty.jpg">
</body>
</html>

페이드 인, 페이드 아웃, 페이드 토글

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn1").click(function() {
			$("img").fadeIn(1000);
		});
		
		$(".btn2").click(function() {
			$("img").fadeOut(1000);
		});
		
		$(".btn3").click(function() {
			$("img").fadeToggle(1000);
		});
	});

</script>
</head>
<body>
	<button class="btn1">fadeOut</button>
	<button class="btn2">fadeIn</button>
	<button class="btn3">fadeToggle</button>
	<br><br><br>
	
	<img src="images/beauty.jpg">
</body>
</html>

투명도 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn1").click(function() {
			$("img").fadeTo(1000, 0.75);
		});
		
		$(".btn2").click(function() {
			$("img").fadeTo(1000, 0.5);
		});
		
		$(".btn3").click(function() {
			$("img").fadeTo(1000, 0.25);
		});
		
		$(".btn4").click(function() {
			$("img").fadeTo(1000, 0.0);
		});
	});

</script>
</head>
<body>
	<button class="btn1">투명도(25%)</button>
	<button class="btn2">투명도(50%)</button>
	<button class="btn3">투명도(75%)</button>
	<button class="btn3">투명도(100%)</button>
	<br><br><br>
	
	<img src="images/beauty.jpg">
</body>
</html>

슬라이드 업, 다운, 토글

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").click(function() {
			$("img").slideUp(1000);
		});
		
		$(".btn2").click(function() {
			$("img").slideDown(1000);
		});
		
		$(".btn3").click(function() {
			$("img").slideToggle(1000);
		});
		
	});

</script>
</head>
<body>
	<button class="btn1">slideup</button>
	<button class="btn2">slidedown</button>
	<button class="btn3">slidetoggle</button>
	<br><br><br>
	
	<img src="images/beauty.jpg">
</body>
</html>

움직임 효과

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$("h1").animate({marginLeft: "250px"}, 5000, function() {
			alert("도착 완료.");
		});
		
		$("h2").animate({marginLeft: "250px", width: "100px", opacity: 0.25}, 5000);
		
		$("h3").animate({marginLeft: "250px"}, 3000, function () {
			$("h3").animate({marginLeft: "100px"}, 2000);
		});
	});

</script>
<style type="text/css">
	h1 {
		width : 50px;
		height : 30px;
		background-color: red;
		font-size: 120%;
	}
	
	h2 {
		width : 50px;
		height : 30px;
		background-color: blue;
		font-size: 120%;
		color: #fff;
	}
	
	h3 {
		width : 50px;
		height : 30px;
		background-color: yellow;
		font-size: 120%;
		color: #fff;
	}
</style>
</head>
<body>
	<h1>내용1</h1>
	<h2>내용2</h2>
	<h3>내용3</h3>
</body>
</html>

효과 정지시키기, 지연시키기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$("h1").animate({marginLeft:"250px"}, 5000);
		
		$("h2").delay(2000).animate({marginLeft:"250px"}, 3000);
		
		$(".stop").click(function() {
			$("h1").stop(); // h1 태그 동작 정지
			$("h2").stop(); // h2 태그 동작 정지
		})
	});

</script>
</head>
<body>
	<button class="stop">stop</button>
	<h1>내용1</h1>
	<h2>내용2</h2>
</body>
</html>

 

저작자표시

'Front > JQuery' 카테고리의 다른 글

[네이버지도API/AJAX] 마커 여러 개 띄우기/디비에 있는 데이터 지도에 표시하기/지도를 움직일 때마다 중심 좌표 얻기/현재 화면에 보이는 마커만 표시하기  (0) 2021.07.15
[네이버지도API] 해당 지역에 마커 찍기, 마커 아이콘 변경  (0) 2021.07.12
[JQuery-3.6.0] 이벤트(Event) 처리  (0) 2021.04.29
[JQuery-3.6.0] 요소(속성) 편집 메서드  (0) 2021.04.28
[JQuery-3.6.0] 요소(속성) 조작, 수치 조작 메서드  (0) 2021.04.28

관련글

티스토리툴바