In-depth learning of jQuery Animate (1)

The content of this article is about in-depth learning of Animate in jQuery (1), so that everyone can further understand the usage of animate in jQuery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How much do you know about the usage of animate in jQuery? If it is just a simple move of position, show and hide, oh! Oh my gosh you are wasting resources! Because animate is so powerful, you can use it in many unexpected ways! Let’s study it together. [Related video tutorial recommendations: jQuery Tutorial]

First, you need to understand the detailed usage of animate in jQuery API.

animate: Returns jQuery object

animate( properties [, duration ] [, easing ] [, complete ] )

Description: Perform custom animation based on a set of CSS properties.

1. animate( properties [, duration ] [, easing ] [, complete ] )

1. Properties

Type: PlainObject

An object of CSS properties and values. The animation will move according to this group of objects.

2. Duration (default: 400)

Type: Number or String

A string or number determines how long the animation will run. (Default value: "normal", string "slow", "normal", or "fast" or a millisecond value indicating the animation duration (such as: 1000))

3. easing (default: swing)

Type: String

A string indicating which easing function to use for the transition. (jQuery itself provides "linear" and "swing")

4. complete

Type: Function()

Function executed when the animation is completed.

2. animate( properties, options )

1. Properties

Type: PlainObject

An object of CSS properties and values. The animation will move according to this group of objects.

2, options

Type: PlainObject

A set of values ​​containing animation options. Supported options:

1), duration (default: 400)

Type: Number or String

A string or number determines how long the animation will run. (Fool's Pier Note: Default value: "normal", three predetermined speed strings ("slow", "normal", or "fast") or a millisecond value indicating the animation duration (such as: 1000))

2), easing (default: swing)

Type: String

A string indicating which easing function to use for transition. (Note from Fool's Wharf: jQuery itself provides "linear" and "swing", and you can use the jQuery Easing Plugin for other effects)

3), queue (default: true)

Type: Boolean or String

A Boolean value indicating whether to place the animation in the effects queue. If false, the animation will start immediately. Starting with jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used, the animation does not start automatically; you must call .dequeue("queuename") to start it.

4), specialEasing

Type: PlainObject

One or more CSS properties defined by the first parameter properties of this method, and their corresponding easing functions A map of key-value pairs. (New in 1.4)

5),step

Type: Function(Number now, Tween tween)

Every The function that will be called for each animated property of an animated element. This function provides an opportunity to modify the Tween object to change the property values ​​in the settings.

6）、progress

Type: Function( Promise animation, Number progress, Number remainingMs )

Each step animation A function called upon completion, executing a separate function for each animated element, regardless of how many animation properties there are. (version added: 1.8)

7), complete

Type: Function()

Function executed when the animation is completed.

8), done

Type: Function( Promise animation, Boolean jumpedToEnd )

Function executed when the animation is completed. (His Promise object status has been completed). (version added: 1.8)

9), fail

Type: Function( Promise animation, Boolean jumpedToEnd )

animation failed Function to be executed when completed. (His Promise object status is not completed). (version added: 1.8)

10）、always

Type: Function( Promise animation, Boolean jumpedToEnd )

Executed when the animation is completed or stopped when it is not completed function. (His Promise object status is completed or incomplete). (version added: 1.8)

For some basic applications, you can refer to jQuery API, or jQuery API Chinese.

The orange part is what I want to focus on in this article!

PlainObject

PlainObject类型，是Javascript对象包含0个或者跟多键值对。换句话说，PlainObject也是Object对象。但在jQuery文档中，被设计是为了区分其他多种Javascript对象。如null,用户自定义的数组，或者是主机对象向如document,typeof 值都是 “object”。通过jQuery.isPlainObject()方法来判断传入的的参数是否是PlainObject.

var a = [];
var d = document;
var o = {};
 
typeof a; // object
typeof d; // object
typeof o; // object
 
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

queue

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。

它是来决定不同动画进行的顺序。

$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
 $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );

#block1要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。注意到是并且了吗？是同时进行的~~

#block2要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。

关于 step 就留到下次在讲解吧！

The above is the detailed content of In-depth learning of jQuery Animate (1). For more information, please follow other related articles on the PHP Chinese website!