jQuery.toggle() 함수 사용 예시에 대한 자세한 설명

toggle() 함수는 일치하는 모든 요소를 ​​전환하는 데 사용됩니다. 또한 요소 전환에 대한 전환 애니메이션 효과를 지정할 수도 있습니다.

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

여기서 소개하는 토글() 함수는 요소의 표시/숨기기를 전환하는 데 사용됩니다. jQuery에는 클릭 이벤트를 바인딩하고 트리거될 때 다른 이벤트 처리 기능을 차례로 실행하도록 전환하는 데 사용되는 동일한 이름의 이벤트 함수 토글()도 있습니다.

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

Syntax

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

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

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

사용법 2:

jQueryObject.toggle( 옵션 )

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

사용법 3: jQuery 1.3에서는 이 사용 방법을 새로 지원합니다.

jQueryObject.toggle( showOrHide )

부울 값 showOrHide를 사용하여 요소를 표시할지 숨길지 지정합니다.

Parameters

매개변수 설명

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

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

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

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

showOrHide 부울 유형은 요소 표시/숨기기에 대한 부울 값을 지정합니다. true이면 요소가 표시되고, 그렇지 않으면 숨겨집니다.

toggle()에 매개변수가 지정되지 않으면 애니메이션 효과를 사용하지 않고 요소가 가장 빠른 방법으로 직접 표시되거나 숨겨집니다.

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

속성 속성 설명

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

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

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

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

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

반환 값

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

예제 및 설명

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

<p>CodePlayer</p>
<p>专注于编程开发技术分享</p>

토글 효과:

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

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

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