jQuery.slideToggle() 함수 사용법에 대한 자세한 설명

slideToggle() 함수는 슬라이딩 전환 애니메이션 효과로 일치하는 모든 요소를 ​​전환하는 데 사용됩니다.

소위 "스위치"는 요소가 현재 표시되어 있으면 숨기고(위로 슬라이드), 요소가 현재 숨겨져 있으면 표시되도록(아래로 슬라이드)하는 것을 의미합니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

이 함수는 jQuery 1.0의 새로운 기능입니다. SlideToggle() 함수는 주로 다음과 같은 두 가지 형태의 사용법을 가지고 있습니다:

사용법 1: jQuery 1.4.3에서는 매개변수 완화를 새로 지원합니다.

jQueryObject.slideToggle( [ 기간 ] [, 완화 ] [, 완료 ] )

사용법 2:

jQueryObject.slideToggle( 옵션 )

사용법 2는 사용법 1의 변형입니다. 필수 옵션 매개변수를 객체 형태로 지정합니다(사용법 1보다 더 많은 옵션 매개변수를 지정할 수 있습니다).

Parameters

매개변수 설명

duration 선택 사항/String/Number 유형은 전환 애니메이션이 실행되는 시간(밀리초)을 지정하며 기본값은 400입니다. 이 매개변수는 string"fast"(=200) 또는 "slow"(=600)일 수도 있습니다.

easing 옵션/문자열 유형은 사용할 애니메이션 효과를 지정합니다. 기본값은 "스윙"이며 "선형" 또는 기타 사용자 정의 애니메이션 스타일 함수 이름으로 설정할 수도 있습니다.

complete Option/Function 유형 요소는 해당 기능이 표시된 후에 실행되어야 합니다. 함수 내의 이는 현재 DOM 요소를 가리킵니다.

options Object 클래스 유형별로 지정된 옵션 매개변수 개체입니다.

매개변수 옵션 개체는 다음 속성을 인식할 수 있습니다(다음 속성은 선택 사항임).

속성 속성 설명

duration 매개변수 기간을 참조하세요.

easing 매개변수 완화를 참조하세요.

complete 매개변수 완료를 참조하세요.

queue 부울 유형은 애니메이션을 효과 대기열에 넣을지 여부를 나타내며 기본값은 true입니다. 버전 1.7부터 이 매개변수는 지정된 이름을 가진 효과 대기열에 넣는 데 사용되는 문자열이 될 수 있습니다. 지정한 대기열이 자동으로 시작되지 않으면 dequeue("queueName")를 수동으로 호출하여 대기열을 시작해야 합니다.

또한 jQuery 1.4 및 1.8에는 매개변수 옵션에 대한 새로운 옵션 지원이 많이 추가되었지만 이러한 매개변수는 일반적으로 사용되지 않으므로 자세한 내용은 jQuery 공식 문서를 참조하세요.

반환 값

slideToggle()함수의 반환 값은 jQuery 유형이며 현재 jQuery 개체 자체를 반환합니다.

예제 및 설명

다음 초기 HTML 코드를 참조하세요.

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee프로그래밍 개발 기술 공유에 집중94b3e26ee717c64999d7867364b1b4a3

슬라이딩 전환 효과 ：

3966846cdd030ebcb077381edce2b072

703e49eaede404d39352339c95412141slideToggle( )4afa15d3069109ac30911f04c56f3338

7bfdea07c9b5e145441728e641150443slideToggle( "느림" )< ;/option>

  e7b5676beacd3b0a53f4ed158db0e503slideToggle( 3000 )4afa15d3069109ac30911f04c56f3338

  ccbcb9736adf3fafd4a4c2c497760953slideToggle( 1000, 완료 )4afa15d3069109ac30911f04c56f3338 2ce8bb897015d8c94ea5b219b403d0ceslideToggle( 1000, "linear" )4afa15d3069109ac30911f04c56f3338

  ed1a4eaf9baabdebbfb66c11d76987easlideToggle( options )4afa15d3069109ac30911f04c56f3338

7c5f0b45f3c6ec27e61b21a415cf7602다음은 SlideToggle( )을 시연하기 위한 SlideToggle() 함수 관련 jQuery 샘플 코드입니다. 기능별 사용법:

//【切换显示/隐藏】按钮
$("#btnSlideSwitch").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").slideToggle( );      
    }else if(v == "2"){
        $("p").slideToggle( "slow" );   
    }else if(v == "3"){
        $("p").slideToggle( 3000 ); 
    }else if(v == "4"){
        $("p").slideToggle( 1000, function(){
            alert("切换完毕!");
        } );
    }else if(v == "5"){
        $("p").slideToggle( 1000, "linear" );   
    }else if(v == "6"){
        $("p").slideToggle( { duration: 1000 } );   
    }
} );

위 내용은 jQuery.slideToggle() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!