[jQuery] 제이쿼리 :: (4) 효과(Effects)

소개순서

(1) 개념 및 기본 선택자

(2) 문서 객체 조작(DOM Control)

(3) 이벤트(Event)

👉🏻 (4) 효과(Effects)

 

---

 

◽ 효과(Effect)의 기본형태

모든 효과는 속도, 콜백함수를 지정할 수 있으며 생략할 수도 있다.

$('선택요소').이벤트함수('속도', 콜백함수)

 

💡 Tip

속도: slow, normal, fast 또는 사용자 지정 숫자

 

 

◽ 효과(Effects) 종류

효과	설명
$('선택요소').hide()	선택 요소 숨김
$('선택요소').show()	선택 요소 노출
$('선택요소').toggle()	show(), hide() 반복 // 버튼을 클릭할 때 마다 <p> 태그가 사라지고 나타나는 것이 반복됨. $("button").click(function(){ $("p").toggle(); });
$('선택요소').slideUp()	선택 요소를 말아올리듯 숨김
$('선택요소').slideDown()	선택 요소를 말아 내리듯 노출
$('선택요소').slideToggle()	slideUp(), slideDown()을 반복
$('선택요소').fadeOut()	선택 요소를 서서히 사라지게 함
$('선택요소').fadeIn()	선택 요소를 서서히 나타나게 함
$('선택요소').fadeTo() $('선택요소').fadeTo(속도, 투명도, 콜백함수)	선택 요소를 원하는 만큼 투명화 시킴 - 투명도: 0~1 사이의 값 (1: 100%)

 

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.