슬라이드(slide) 효과

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

메소드설명
.slideUp()선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다.
.slideDown()선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다.
.slideToggle()선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용한다.

.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"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 한다.

코드 실행

+ Recent posts