Detailed explanation of jQuery.slideToggle() function usage

slideToggle() function is used to switch all matching elements with sliding transition animation effect.

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

This function belongs to the jQuery object (instance).

Syntax

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

Usage 1: jQuery 1.4.3 newly supports parameter easing.

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

Usage 2:

jQueryObject.slideToggle( 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).

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.

The parameter options object can recognize 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

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

Example&Instructions

Please refer to the following initial HTML code:

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeFocus Sharing on programming development technology94b3e26ee717c64999d7867364b1b4a3

Sliding switching effect:

3966846cdd030ebcb077381edce2b072

f386d62da539bfa439e42563abf3af55slideToggle( )4afa15d3069109ac30911f04c56f3338

7bfdea07c9b5e145441728e641150443slideToggle( "slow" )4afa15d3069109ac30911f04c56f3338

960601a27a03ead82f0918b29e2f2620slideToggle( 3000 )4afa15d3069109ac30911f04c56f3338

ccbcb9736adf3fafd4a4c2c497760953slideToggle( 1000, complete )4afa15d3069109ac30911f04c56f3338

d69c6c618adc08965b4370e02787886cslideToggle( 1000, "linear" )4afa15d3069109ac30911f04c56f3338

ed1a4eaf9baabdebbfb66c11d76987easlideToggle( options )4afa15d3069109ac30911f04c56f3338

18bb6ffaf0152bbe49cd8a3620346341

709a854ef96a3099edd99b77b8306cae

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

//【切换显示/隐藏】按钮
$("#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 } );   
    }
} );

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