[제이쿼리] jQuery 효과 메서드

 

제이쿼리(jQuery) 효과 메서드

---

안녕하세요? 장장스입니다.

이번 포스팅은 제이쿼리 효과 메서드입니다. 파워포인트를 사용해보신 분이라면 글자가 슝~ 그림이 샤샥하고 등장하는 효과를 내보신적이 있으실 겁니다. 제이쿼리 효과 메서드를 이용하면 비슷한(?) 효과를 낼수 있습니다.

 

 

효과 메서드

---

효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있습니다.

 

●숨김 효과

종류	설명
hide()	요소를 숨깁니다.
fadeOut()	요소가 점점 투명해지면서 사라집니다.
slideUp()	요소가 위로 접히며 숨겨집니다.

 

●노출 효과

종류	설명
show()	숨겨진 요소가 노출됩니다.
fadeIn()	숨겨진 요소가 점점 선명해집니다.
slideDown()	숨겨진 요소가 아래로 펼쳐집니다.

 

●숨김과 노출 효과

종류	설명
toggle()	hide(), show() 효과를 적용합니다.
fadeToggle()	fadeIn(), fadeOut() 효과를 적용합니다.
slideToggle()	slideUp(), slideDown() 효과를 적용합니다.
fadeTo()	지정한 투명도를 적용합니다.

 

 

 

효과 메서드의 기본형

---

효과 메서드는 효과 소요 시간, 가속도, 콜백 함수를 인자값으로 전달할 수 있습니다.

 

$("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백 함수);

 

효과 소요 시간

"slow", "normal", "fast"

1,000(1초), 500(0.5초)

 

 

가속도

"swing" 시작과 끝은 느리게, 중간은 빠르게 (기본값)

"linear" 일정한 속도로 움직입니다.

 

 

콜백 함수

효과가 끝난 후에 실행할 함수로 생략이 가능하다

 

 

 

fadeTo() 메서드

---

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);

투명도

0~1 사이의 값을 입력 할 수 있니다. 1에 가까울 수록 선명합니다.

 

 

 

 

 

실습!

---

▼javascript

$(function( ) {
	$(".btn2").hide();

	$(".btn1").on("click", function( ) {
		$(".box").slideUp(1000, "linear", 
		function( ) {
			$(".btn1").hide( );
			$(".btn2").show( );
		});
	});

	$(".btn2").on("click", function( ) {
		$(".box").fadeIn(1000, "swing", 
		function( ) {
			$(".btn2").hide( );
			$(".btn1").show( );
		});
	});

	$(".btn3").on("click", function( ) {
		$(".box").slideToggle(1000, "linear");
	});

	$(".btn4").on("click", function( ) {
		$(".box").fadeTo("fast", 0.3);
	});

	$(".btn5").on("click", function( ) {
		$(".box").fadeTo("fast", 1);
	});
});

▼html

<p>
	<button class="btn1">slideUp</button>
	<button class="btn2">fadeIn</button>
</p>
<p>
	<button class="btn3">toggleSide</button>
</p> 
<p>
	<button class="btn4">fadeTo(0.3)</button>
	<button class="btn5">fadeTo(1)</button>
</p>   
<div class="box">
	<div class="content">
	안녕하세요? 장장스입니다. 지금은 효과 메서드 테스트를 하고 있습니다. 위의 버튼을 눌러서 어떤 효과메서드가 적용되는지 확인해 보세요!
	</div>
</div>

▼실행결과 버튼을 눌러보세요!

안녕하세요? 장장스입니다. 지금은 효과 메서드 테스트를 하고 있습니다. 위의 버튼을 눌러서 어떤 효과메서드가 적용되는지 확인해 보세요!

 

 

Post

---

• jQuery 효과 메서드
• jQuery 애니메이션 메서드 animate()
• jQuery 애니메이션 효과 제어 메서드

References

---

• https://api.jquery.com/category/effects/

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)