[JQUERY] 내장 이펙트

 

내장 이펙트 : 요소의 CSS 속성을 변화시키면서 움직이게 만듦

 

.hide( ) : 선택한 요소의 display 속성을 none으로 바꾸고 레이아웃에서 없앰

.show( ) : 선택한 요소의 display 속성을 바꿔서 보이게 만듦

.toggle( ) : 요소가 숨겨진 상태라면 그 요소를 보이게 만들고, 보이는 상태면 숨김

 

.fadeIn( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 0에서 100으로 바꿈

.fadeTo( ) : 요소를 지정한 불투명도 퍼센트까지 애니메이트 가능

.fadeOut( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 100에서 0으로 바꿈

                 요소가 보이지는 않지만 그 자리는 유지됨

 

.slideUp( ) : DOM이 선택한 요소의 높이를 0으로 바꾼 다음에 display 속성을 none으로 설정하게 만듦

                슬라이드해서 숨기는 셈

.slideDown( ) : 선택한 요소의 높이를 0에서부터  CSS 스타일에 설정되어 있는 값까지 애니메이트해서 보이게 만듬

.slideToggle( ) : 요소의 현재 높이가 전체 높이인지 0인지 확인한 다음, 그 결과에 따라 슬라이드 방식을 바꿈

- 현재 높이가 0이면, 요소이.slideDown( ) 메소드를 적용

- 현재 높이가 원래 높이면, .slideUp( ) 메소드를 적용