..

Search

26) 슬라이드 효과

슬라이드 효과


슬라이드(slide) 효과

제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현합니다.

이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.

 

1. .slideUp()

2. .slideDown()

3. .slideToggle()


슬라이드 업(slide up)과 슬라이드 다운(slide down)

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

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

예제

$(function() {

    $("#slideUpBtn").on("click", function() {

        $("#divBox").slideUp();   // id가 "divBox"인 요소를 올라가면서 사라지게 함.

    });

    $("#slideDownBtn").on("click", function() {

        $("#divBox").slideDown(); // id가 "divBox"인 요소를 내려오면서 나타나게 함.

    });

});

코딩연습 ▶

 

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 슬라이드 효과의 속도를 조절할 수도 있습니다.

예제

$(function() {

    $("#slideUpBtn").on("click", function() {

        $("#divBox").slideUp(500);   // id가 "divBox"인 요소를 0.5초에 걸쳐 올라가면서 사라지게 함.

    });

    $("#slideDownBtn").on("click", function() {

        $("#divBox").slideDown(300); // id가 "divBox"인 요소를 0.3초에 걸쳐 내려오면서 나타나게 함.

    });

});

코딩연습 ▶


슬라이드 효과의 토글

제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메소드를 사용할 수 있습니다.

선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행합니다.

예제

$(function() {

    $("#slideToggleBtn").on("click", function() {

        // id가 "divBox"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 함.

        $("#divBox").slideToggle("fast");

    });

});

코딩연습 ▶


슬라이드 효과와 관련된 메소드

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

연습문제