[Jquery] slideUp(), slideDown() - 슬라이드 효과 내는 방법

이번 글에서는 슬라이드 효과를 내는 방법에 대하여 알아보도록 하겠습니다.

슬라이드(slide) 관련 메소드는 대표적으로 3가지입니다.

1. slideUp()

2. slideDown()

3. slideToggle()

slideUp()과 slideDown()

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

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

아래 예제를 보시면 쉽게 이해하실 수 있으실 겁니다.

<body>
<style>
    #divBox {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border: 5px solid green;
        margin-top: 20px;
    }
</style>
<script>
    $(function () {
        $("#slideUpBtn").on("click", function() {
            $("#divBox").slideUp();
        })
        $("#slideDownBtn").on("click", function() {
            $("#divBox").slideDown();
        })
    })
</script>
    <h1>슬라이드 업과 슬라이드 다운</h1>
    <button id="slideUpBtn">슬라이드 업</button>
    <button id="slideDownBtn">슬라이드 다운</button>
    <div id="divBox"></div>
</body>

출력 결과

출력 결과는 사진 이미지이기 때문에 애니메이션 효과인 슬라이드를 보여주지는 않네요..

결과가 궁금하신 분은 직접 코딩 해보시기 바랍니다!

또한, 사라지거나 나타나는 속도도 설정할 수 있는데요.

인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 키워드를 적어주면, 슬라이드 효과의 속도를 설정할 수도 있습니다.

아래 예제 처럼 메소드의 인수에 적어주시면 됩니다.

<script>
    $(function () {
        $("#slideUpBtn").on("click", function() {
            $("#divBox").slideUp(3000); // 3초에 걸쳐서 진행
        })
        $("#slideDownBtn").on("click", function() {
            $("#divBox").slideDown(1000); // 1초에 걸쳐서 진행
        })
    })
</script>

slideToggle() 메소드

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

아래 예제 처럼 사용하시면 됩니다.

<body>
<style>
    #divBox {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border: 5px solid green;
        margin-top: 20px;
    }
</style>
<script>
    $(function () {
        $("#slideToggleBtn").on("click", function() {
            $("#divBox").slideToggle("fast"); // 2초에 걸쳐서 진행
        })
    })
</script>
    <h1>슬라이드 토글</h1>
    <button id="slideToggleBtn">슬라이드 토글</button>
    <div id="divBox"></div>
</body>

저작자표시 비영리 변경금지

'1. 웹개발 > 1_1_2 Jquery' 카테고리의 다른 글

[Jquery] animate() - 애니메이션 효과 만드는 방법 (0)	2020.04.19
[Jquery] delay(), stop(), finish() - 효과 정지하는 방법 (0)	2020.04.18
[Jquery] fadeIn(), fadeOut() - 페이드 효과 내는 방법 (0)	2020.04.12
[Jquery] serialize() - 직렬화 방법 (0)	2020.04.12
[Jquery] $.ajax() - 사용 방법 (0)	2020.04.12

코딩병원