jQuery 슬라이드 요소 UP/토글 업

간단한 jQuery 코드 스 니펫은 페이지 요소를 슬라이드하거나 jquery.slidetoggle ()를 사용하여 토글링합니다. 차이점은 Jquey의 SlideUp () 함수가 주로 요소를 시야에서 밀어 내고 SlideDown ()을 사용하여 다시 나타나는 데 사용되는 반면 JQuery의 Toggleup () 함수는 동일한 기능 호출 내 에서이 기능을 요소에 binded합니다.

슬라이드 업 예 http://api.jquery.com/slideup/ SlideToggle 예제

http://api.jquery.com/slidetoggle/ http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

jQuery 슬라이드 요소

<span>$('#clickme').click(function() {
</span>  <span>$('#book').slideUp('slow', function() {
</span>    <span>// Animation complete.
</span>  <span>});
</span><span>});</span>

에 대한 자주 묻는 질문 (FAQ) jQuery slideToggle () 메소드

jQuery slideToggle () 메소드는 요소에 슬라이딩 효과를 만들 수있는 jQuery의 내장 함수입니다. SlideUp ()와 SlidEdown () 메소드 사이를 전환하므로 요소가 현재 보이는 경우 요소를 미끄러지고 숨겨져있는 경우 아래로 밀어냅니다. 이 방법은 사용자 상호 작용을 기반으로 요소를 표시하거나 숨길 수있는 대화식 및 동적 웹 페이지를 작성하는 데 특히 유용합니다.

jquery에서 slideToggle () 메소드를 어떻게 사용합니까?

<span>$('#clickme').click(function() {
</span>  <span>$('#book').slideToggle('slow', function() {
</span>    <span>// Animation complete.
</span>  <span>});
</span><span>});</span>

SlidEtoggle () 방법을 사용하려면 SlidEtoggle () 방법을 선택해야합니다. 기본 예는 다음과 같습니다.

$ ( "#myelement"). slideToggle ();

이 예에서는 현재 숨겨져있는 경우 ID "Mylement"가있는 요소가 미끄러 져 내려 가고 현재 숨겨져있는 경우 아래로 미끄러 져 내려갑니다. $ ( "#myelement"). slideToggle ( "slow");

이 예에서는 SlidEtoggle () 효과가 ID "myElement"를 사용하여 요소에 천천히 적용됩니다.

slidEtoggle (), 슬라이드 up ()의 차이는 무엇입니까? SlideUp ()와 SlideDown () 메소드 사이의 토글. 선택한 요소가 현재 표시되면 SlideToggle ()이 미끄러 져 숨겨지게합니다. 요소가 현재 숨겨져 있으면 SlideToggle ()가 아래로 밀려서 보이게합니다. 한편, slideup () 메소드는 항상 슬라이딩 모션으로 선택한 요소를 숨 깁니다. 슬라이드 타운 () 메소드는 항상 슬라이딩 동작으로 선택된 요소를 보여줍니다. SlidEtoggle () 효과가 완료된 후 코드를 실행할 수 있습니까? <h3> 예, SlidEtoggle () 효과가 slideToggle () 메소드에 콜백 함수를 전달하여 CODE를 실행할 수 있습니다. 슬라이딩 효과가 완료되면이 기능이 실행됩니다. 예는 다음과 같습니다. <example example> </example> </h3> $ ( "#myelement"). slideToggle ( "slow", function () {<p> alert ( "슬라이드 토글 완료!"); 이 예에서는 Slidetoggle () 효과가 완료된 후에 알림 상자가 표시 될 수 있습니다. 완료? <br> 예, stop () 메소드를 사용하여 완료되기 전에 slidetoggle () 효과를 중지 할 수 있습니다. 이 메소드는 선택한 요소에서 현재 실행중인 애니메이션을 중지합니다. 예는 다음과 같습니다. <example example> <br> $ ( "#myelement"). stop (). slideToggle ( "slow"); 이 예에서는 ID "myelement"가있는 요소에서 현재 실행중인 모든 애니메이션이 중지되고 SlidEtoggle () 효과가 적용됩니다. 예, 공통 클래스 또는 속성으로 선택하여 여러 요소에서 SlideToggle () 메소드를 한 번에 사용할 수 있습니다. 예는 다음과 같습니다. <example example> <br> $ ( ". myclass"). SlidEtoggle ( "slow"); <br>이 예에서는 SlidEtoggle () 효과가 클래스“myclass”와 함께 모든 요소에 적용됩니다. 보다 복잡한 효과를 만들기위한 다른 jQuery 방법. 예를 들어, Fadein () 및 Fadeout () 메소드를 사용하여 미끄러지면서 요소를 모르고 출발 할 수 있습니다. 예는 다음과 같습니다. <example example> </example></example></example></p> $ ( "#myelement"). slideToggle ( "slow"). fadein ( "slow"). fadeout ( "slow"); <h3>이 예에서는 ID "myelement"가있는 요소가 미끄러 지거나 아래로 내려지고 faded </h3> <p> <br>가 작동합니다. 요소 <br> SlidEtoggle () 메소드는 DIV, 단락 및 제목과 같이 높이를 가질 수있는 모든 HTML 요소와 함께 작동합니다. 그러나이 요소는 기본적으로 높이가 없기 때문에 스팬 또는 링크와 같은 인라인 요소에서는 예상대로 작동하지 않을 수 있습니다. <br> </p> jquery를 사용하지 않으면 slideToggle () 메소드를 사용할 수 있습니까? SlidEtoggle () 메소드는 jquery의 일부이므로 JQUERY를 사용하여 JQUERY를 포함시켜야합니다. 그러나 더 많은 코드가 필요할 수 있지만 jQuery를 사용하는 것만 큼 간단하지는 않지만 순수한 JavaScript 또는 CSS로 유사한 효과를 만들 수 있습니다.

위 내용은 jQuery 슬라이드 요소 UP/토글 업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!