jQuery 효과 - 슬라이딩
- 이전 페이지 jQuery 애니메이션 투명도 조절
- 다음 페이지 jQuery 애니메이션
jQuery 슬라이드 메서드는 요소를 상하로 슬라이드할 수 있습니다.
효과 데모
여기를 클릭하여 패널을 숨기거나 보여줍니다
일시불금처럼 시간은 귀중합니다. 따라서, 우리는 빠르고 이해하기 쉬운 학습 내용을 제공합니다.
여기서, 필요한 모든 지식을 이해하기 쉬운 편리한 모드로 얻을 수 있습니다.
예제
- jQuery slideDown()
- jQuery slideDown() 메서드를 보여줍니다.
- jQuery slideUp()
- jQuery slideUp() 메서드를 보여줍니다.
- jQuery slideToggle()
- jQuery slideToggle() 메서드를 보여줍니다.
jQuery 슬라이딩 메서드
jQuery를 통해 요소에 슬라이딩 효과를 생성할 수 있습니다.
jQuery는 다음과 같은 슬라이딩 메서드를 가집니다:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 메서드
jQuery slideDown() 메서드는 요소를 하강 방향으로 슬라이딩합니다.
문법:
$(selector).slideDown(speed,callback);
선택 사항 speed 파라미터는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.
선택 사항 callback 파라미터는 슬라이딩이 완료된 후 실행할 함수 이름입니다.
아래의 예제는 slideDown() 메서드를 보여줍니다:
예제
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 메서드
jQuery slideUp() 메서드는 요소를 상승 방향으로 슬라이딩합니다.
문법:
$(selector).slideUp(speed,callback);
선택 사항 speed 파라미터는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.
선택 사항 callback 파라미터는 슬라이딩이 완료된 후 실행할 함수 이름입니다.
아래의 예제는 slideUp() 메서드를 보여줍니다:
예제
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 메서드
jQuery slideToggle() 메서드는 slideDown()와 slideUp() 메서드 간의 전환을 할 수 있습니다.
요소가 하강 방향으로 슬라이딩되면 slideToggle()는 그들을 상승 방향으로 슬라이딩할 수 있습니다.
요소가 상승 방향으로 슬라이딩되면 slideToggle()는 그들을 하강 방향으로 슬라이딩할 수 있습니다.
$(selector).slideToggle(speed,callback);
선택 사항 speed 파라미터는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.
선택 사항 callback 파라미터는 슬라이딩이 완료된 후 실행할 함수 이름입니다.
아래의 예제는 slideToggle() 메서드를 보여줍니다:
예제
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 효과 참조 매뉴얼
jQuery 효과를 전체적으로 확인하려면 우리의 jQuery 효과 참조 매뉴얼。
- 이전 페이지 jQuery 애니메이션 투명도 조절
- 다음 페이지 jQuery 애니메이션
