Detailed explanation of jQuery.animate() function usage examples

The animate() function is used to perform a custom animation based on css attributes.

You can set css styles for matching elements, and the animate() function will perform a transition animation from the current style to the specified css style.

For example: the current height of a div element is 100px, and its CSS height property is set to 200px. animate() will perform a transition animation that gradually increases the height of the div element from 100px to 200px.

This function belongs to the jQuery object (instance).

Syntax

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

Usage 1:

jQueryObject.animate( cssProperties [, duration ] [, easing ] [, complete ] )

Usage two:

jQueryObject.animate(cssProperties, options)

Usage two 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

cssProperties Object classObject object composed of key-value pairs of one or more css properties.

duration Optional/String/Number type specifies how long the 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 customized animation style functions.

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 The option parameter object specified by the Object type.

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

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

Example & Description

Except for the values ​​mentioned below, all animated css properties should be able to change to a single value. Using basic jQuery functionality, most non-numeric CSS properties cannot be used to perform animations. For example: width, height, left, and top can all be used for animation, but color and background-color cannot be used for animation (unless the jQuery.Color() plug-in is used). Unless you specify a unit for the attribute value (for example: px, em, %), the default value unit is pixels (px).

The shorthand css properties may not be fully supported, such as border, margin, etc., so their use is not recommended.

You can also set the css attribute value to some specific strings, such as: "show", "hide", "toggle", and jQuery will call the default animation form of this attribute.

In addition, CSS attribute values ​​​​can also be relative. You can prefix the attribute value with "+=" or "-=" to increase or decrease the specified value from the original attribute value. For example: { "height": "+=100px" } means adding 100px to the original height.

Please refer to the following initial HTML code:

a8dd71fc29d112c025bfe5e53c348f7b CodePlayer16b28748ea4df4d9c2150843fecfba68

Animation effect:

<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

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

$("#exec").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        // 数值的单位默认是px
        $myDiv.animate( { height: 200 } );
    }else if(v == "2"){
        // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
        // 多个动画连续执行
        $myDiv.animate( { height: "+=300px" }, "slow" ); 
        $myDiv.animate( { width: "50%" }, 1000 );       
        $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
    }else if(v == "3"){
        // font-size或fontSize均可，由多个单词构成的属性均是如此
        $myDiv.animate( { fontSize: "30px" }, 2000 );
        $myDiv.animate( { fontSize: "14px" }, 2000, function(){
            alert("动画3执行完毕!");
        });
    }else if(v == "4"){
        $myDiv.animate( { width: "50%", height: "50%" }, { duration: 2000, easing: "linear" });
    }else if(v == "5"){
        // 根据高度切换显示/隐藏，显示时高度从0增加到原高度，隐藏时高度从原高度减小到0
        $myDiv.animate( { height: "toggle" });
    }   
} );

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