Detailed explanation of jQuery.toggle() function usage examples

toggle() function is used to toggle all matching elements. In addition, you can also specify transition animation effects for element switching.

The so-called "switch" means that if the element is currently visible, hide it; if the element is currently hidden, make it display (visible).

The toggle() function introduced here is used to switch the display/hide of elements. jQueryThere is also an event function toggle() with the same name, which is used to bind the click event and switch to execute different event processing functions in turn when triggered.

This function belongs to the jQuery object (instance).

Syntax

This function is new in jQuery 1.0. The toggle() function mainly has the following two forms of usage:

Usage 1: jQuery 1.4.3 newly supports parameter easing.

jQueryObject.toggle( [ duration ] [, easing ] [, complete ] )

Usage 2:

jQueryObject.toggle( options )

Usage The second is a variation of usage one. Specify the required option parameters in object form (you can specify more option parameters than Usage 1).

Usage three: jQuery 1.3 newly supports this usage.

jQueryObject.toggle( showOrHide )

Use the Boolean value showOrHide to specify whether to show or hide the element.

Parameters

Parameter Description

duration Optional/String/Number type specifies how long the transition animation runs (number of milliseconds), the default value is 400. This parameter can also be a string"fast"(=200) or "slow"(=600).

easing Optional/String type specifies which animation effect to use, the default is "swing", and can also be set to "linear" or other custom animation style function names.

complete Function that needs to be executed after the optional/Function type element is displayed. This within the function points to the current DOM element.

options Object classType specified option parameter object.

showOrHide Boolean type specifies a Boolean value for showing/hiding elements. If true, the element is displayed, otherwise it is hidden.

If no parameters are specified for toggle(), the element will be displayed/hidden directly in the fastest way, without animation effects.

The parameter options object can identify the following attributes (the following attributes are optional):

Attribute Attribute description

duration See parameter duration.

easing See parameter easing.

complete See parameter complete.

queue Boolean type indicates whether to put the animation into the effect queue, the default is true. Starting from version 1.7, this parameter can be a string, which is used to put into the effect queue with the specified name. If the queue you specify does not start automatically, you need to manually call dequeue("queueName") to start the queue.

In addition, jQuery 1.4 and 1.8 also added many new option support for parameter options, but these parameters are not commonly used and will not be described here. For details, see the jQuery official documentation.

Return value

toggle()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

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

Toggle effect:

<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="切换显示/隐藏" >

The following is related to the toggle() function jQuery sample code to demonstrate the specific usage of the toggle() function:

//【切换显示/隐藏】按钮
$("#btnSwitch").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").toggle( );       
    }else if(v == "2"){
        $("p").toggle( "slow" );    
    }else if(v == "3"){
        $("p").toggle( 3000 );  
    }else if(v == "4"){
        $("p").toggle( 1000, function(){
            alert("切换完毕!");
        } );
    }else if(v == "5"){
        $("p").toggle( 1000, "linear" );    
    }else if(v == "6"){
        $("p").toggle( { duration: 1000 } );    
    }else if(v == "7"){
        $("p").toggle( true ); // 相当于$("p").show(); 
    }else if(v == "8"){
        $("p").toggle( false );  // 相当于$("p").hide();
    }
} );

The above is the detailed content of Detailed explanation of jQuery.toggle() function usage examples. For more information, please follow other related articles on the PHP Chinese website!