Detailed explanation of jQuery.slideUp() function usage

slideUp() function is used to hide all matching elements with an upward sliding transition animation effect.

The upward sliding animation effect, that is, the height of the visible area of ​​the element gradually decreases from the original height to 0 (gradually shrinking upward).

If the element itself is hidden, no changes will be made to it. If the element is visible, hide it.

The opposite of this function is the slideDown() function, which is used to display all matching elements with a downward sliding transition animation effect.

This function belongs to the jQuery object (instance).

Syntax

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

Usage 1: jQuery 1.4.3 newly supports parameter easing.

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

Usage two:

jQueryObject.slideUp( 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 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 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

slideUp()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:

CodePlayer

Focus Sharing on programming development technology

The hidden effect of sliding up:

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

The following is the jQuery sample code related to the slideUp() function to demonstrate the specifics of the slideUp() function Usage:

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

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