jQuery 입문 | 이펙트(effect) 효과 | 슬라이드 효과 .slideUp() .slideDown() .slideToggle()

슬라이드(slide) 효과

jQuery에서의 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현한다. 이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.

.slideUp() 메소드 - 슬라이드 업(slide up)

.slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여준다.

아래 예제는 id가 “divBox1"인 요소를 올라가면서 사라지게 한다.

$("#divBox1").slideUp(); // 인스를 지정하지 않으면 400(0.4초) 동안 올라가면서 사라진다.

인수로 밀리초에 해당하는 숫자을 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox2").slideUp(500); // id가 "divBox2"인 요소를 0.5초 동안 올라가면서 사라지게 한다.

혹은 “slow”, “fast” 등의 예약어를 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox3").slideUp("fast");   

코드 실행

.slideDown() 메소드 - 슬라이드 다운(slide down)

.slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여준다.

아래 예제는 id가 “divBox1"인 요소를 올라가면서 사라지게 한다.

$("#divBox1").slideDown(); // 인스를 지정하지 않으면 0.4초(400) 동안 내려오면서 나타나게 한다.

인수로 밀리초에 해당하는 숫자을 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox2").slideDown(500); // id가 "divBox2"인 요소를 0.5초 동안 내려오면서 나타나게 한다.

혹은 “slow”, “fast” 등의 예약어를 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox3").slideDown("fast");   

코드 실행

.slideToggle() 메소드 - 슬라이드 토글

jQuery에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메소드를 사용할 수 있다.
선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행한다.

$("#divBox1").slideToggle(); 
$("#divBox2").slideToggle(500); // id가 "divBox2"인 요소를 0.5초 동안 올라가면서 사라지거나 내려오면서 나타나게 한다.
$("#divBox3").slideToggle("fast"); // id가 "divBox3"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 한다.

코드 실행