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

fadeToggle() 함수는 페이드 인/페이드 아웃 전환 애니메이션 효과로 일치하는 모든 요소를 ​​전환하는 데 사용됩니다.

소위 "스위치"는 요소가 현재 표시되면 숨겨지고(페이드 아웃), 요소가 현재 숨겨져 있으면 표시(페이드 인)됨을 의미합니다.

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

Syntax

이 함수는 jQuery 1.0의 새로운 기능입니다. fadeToggle() 함수는 주로 다음과 같은 두 가지 사용법을 가집니다:

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

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

사용법 2:

jQueryObject.fadeToggle( 옵션 )

사용법 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 공식 문서를 참조하세요.

반환 값

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

예제 및 설명

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

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

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

페이드 인 및 아웃 전환 효과:

<select id="animation">
    <option value="1">fadeToggle( )</option>
    <option value="2">fadeToggle( "slow" )</option>
    <option value="3">fadeToggle( 3000 )</option>
    <option value="4">fadeToggle( 1000, complete )</option>
    <option value="5">fadeToggle( 1000, "linear" )</option>
    <option value="6">fadeToggle( options )</option>
</select>
<input id="btnFadeSwitch" type="button" value="切换显示/隐藏" >

다음은 fadeToggle() 함수의 구체적인 사용법을 보여주기 위해 fadeToggle() 함수와 관련된 jQuery 샘플 코드입니다.

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

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