jQuery Effects - Slide

jQuery 슬라이드 메서드는 요소를 위 아래로 미끄러지듯이 움직이게(slide) 합니다.

jQuery를 사용하면 요소에 슬라이딩 효과를 적용할 수 있습니다.

jQuery에는 다음과 같은 슬라이드 방법이 있습니다.

• slideDown()
• slideUp()
• slideToggle()

jQuery slideDown() 메서드는 요소를 아래로 슬라이드 하는 데 사용됩니다.

$(selector).slideDown(speed,callback);

속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

콜백 매개 변수 선택은 슬라이딩이 완료된 후 실행되는 함수입니다.

다음 예제는 slideDown() 메서드를 보여줍니다.

    $(document).ready(function() {
      $("#flip").click(function() {
        $("#panel").slideDown("slow");
      });
    });

jQuery slideDown() 메서드는 요소를 아래로 슬라이드 하는 데 사용됩니다.

$(selector).slideUp(speed,callback);

속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

콜백 매개 변수 선택은 슬라이딩이 완료된 후 실행되는 함수입니다.

다음 예제는 slideUp() 메서드를 보여줍니다:

    $(document).ready(function () {
      $("#flip").click(function () {
        $("#panel").slideUp("slow");
      });
    });

jQuery slideToggle() 메서드는 slideDown() 및 slideUp() 메서드 사이에서 토글됩니다.

요소가 아래로 슬라이드 된 경우, slideToggle()은 해당 요소를 위로 슬라이드 합니다.

요소가 위로 슬라이드 된 경우, slideToggle()은 해당 요소를 아래로 슬라이드 합니다.

$(selector).slideToggle(speed,callback);

속도 매개 변수 선택은 “slow”, “fast”, 밀리 초 값을 사용할 수 있습니다.

콜백 매개 변수 선택은 슬라이딩이 완료된 후 실행되는 함수입니다.

다음 예제는 slideToggle() 메서드를 보여줍니다.

    $(document).ready(function () {
      $("#flip").click(function () {
        $("#panel").slideToggle("slow");
      });
    });

모든 jQuery 효과에 대한 전체 개요를 보려면, jQuery Effect Reference로 이동하십시오.