How to Use animate to customize animations in jQuery

This article mainly introduces information about how to use animate to customize animations in jQuery. It is of great reference value. If you need it, you can refer to animation animate ()

01. simple use of the animate () method

Some Complex animations cannot be implemented through several animation functions that have been learned before. This is a powerful animate method.

Perform a 3-second fade-in animation on an element and compare the two sets of animation settings.

$(elem).fadeOut(3000)$(elem).animate({opacity:0},3000)

Obviously, the animate method is more flexible, and you can precisely control style attributes to execute animations.

Syntax:

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

2. animate (properties, options)

The. animate () method allows us to create an animation on the CSS attribute of any numeric value. The two syntaxes are almost the same. The only necessary attribute is a set of CSS attribute key-value pairs. This group of tokens is similar to the attribute key-value pairs used in the set.css () method. In addition to the attribute range, more restrictions are imposed. The second parameter can be passed separately or merged into an object.

Parameter decomposition:

Properties: an Object consisting of one or more key-value pairs of css attributes. Pay special attention to the fact that all attributes used for animation must be numbers, unless otherwise stated; these attributes cannot use basic jQuery functions if they are not numbers. For example, border, margin, padding, width, height, font, left, top, right, bottom, and wordSpacing can all produce animation effects. The background-color is obviously unavailable because the parameter is a value such as red or GBG, So plug-ins are very useful. Otherwise, under normal circumstances, the animation effect cannot only be used. Note that CSS styles are set with DOM names (such as "fontSize") instead of CSS names (such as "font-size ").

Pay special attention to the unit pixel (px) of the property value unless otherwise specified. Units em and % must be specified

.animate({left: ,width: 'px'opacity: 'show',fontSize: "em",}, );

In addition to defining values, each attribute can use 'show', 'hide ', and 'toggle '. These shortcuts allow custom hide and show animations to control the display or hide of elements.

.animate({width: "toggle"});

If a value starting with + = or-= is provided, the target value is calculated by adding or subtracting the given number from the current value of this attribute.

.animate({left: '+50px'}, "slow");

Duration: Time

The animation execution time, in milliseconds. A larger value indicates that the animation execution is slower, not faster. You can also provide the 'fast 'and 'low' strings, indicating the duration is 200 and 600 milliseconds, respectively.
Easing animation algorithm:

Swing is called by default in the jQuery library. Animation at a constant speed. If you need other animation algorithms, find the relevant plug-ins.

Complete callback

The function executed when the animation is completed. This ensures that the animation will be triggered after the animation is confirmed.

02. Execute multiple animations in sequence using the animate () method.

In an animation, if you need to observe the animation execution or perform other operations at a certain time in the animation, you can use the second setting syntax provided by animate, pass an object parameter to get the animation execution status notifications.

. Animate (properties, options)

Options Parameters

Duration-set the animation execution time
Easing-specifies the easing function to be used and the easing function to be used in the Transition
Step: Specify the function to be executed after each animation step is completed.
Progress: This callback is executed every time an animation is called. It is a progress concept.
Complete: callback for animation completion

If an animation is executed for multiple elements, the callback will be executed once on each matching element instead of once as the whole animation.

List common methods

$('#elem').animate({width: 'toggle',height: 'toggle'}, {duration: ,specialEasing: {width: 'linear',height: 'easeOutBounce'},complete: function() {$(this).after('
Animation complete.
');}});

You can call the animate () method to create Custom Animation effects. The Calling format is as follows:

$ (Selector). animate ({params}, speed, [callback])

Here, the params parameter is the CSS attribute name and value for making the animation effect, and the speed parameter is the animation effect speed, in milliseconds, the callback parameter is the name of the callback function executed when the animation is completed.

For example, call the animate () method to display an image in a small to large animation effect, as shown in:

 
  
Make simple animation Effects