How to use animate to customize animation in jQuery-JS Tutorial-php.cn

How to use animate to customize animation in jQuery

高洛峰

Release： 2016-12-28 09:18:06

Original

1327 people have browsed it

Animation animate()

01. Simple use of animate() method

Some complex animations cannot be realized through several animation functions learned before, and this time it is powerful animate method.

Operate an element to perform a 3-second fade-in animation, and compare the differences between the two sets of animation settings.

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

Copy after login

Obviously, the animate method is more flexible and can accurately control the style attributes to perform animation.

Syntax:

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

2 .animate( properties, options )

The .animate() method allows us to create animations on any numeric CSS property. The two syntaxes are almost the same. The only necessary attribute is a set of CSS attribute key-value pairs. This set of properties is similar to the property key-value pairs used to set the .css() method, except that the property scope is more restricted. As for the second parameter, multiple actual parameters can be passed individually or combined into one object.

Parameter decomposition:

properties: an Object object composed of key-value pairs of one or more css properties. It is important to note that all properties used for animation must be numeric unless otherwise stated; these properties will not be able to use basic jQuery functionality if they are not numeric. For example, the common ones, border, margin, padding, width, height, font, left, top, right, bottom, wordSpacing, etc., can all produce animation effects. Background-color is obviously not possible, because the parameter is a value such as red or GBG, which is very useful for plug-ins, otherwise the animation effect cannot be achieved under normal circumstances. Note that CSS styles are set using DOM names (such as "fontSize"), not CSS names (such as "font-size").

Pay special attention to the unit, the unit of the attribute value is pixels (px), unless otherwise stated. The units em and % need to be specified using

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

Copy after login

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 hiding of elements

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

Copy after login

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

.animate({
left: &#39;+50px&#39;
}, "slow");

Copy after login

duration: time

Animation The execution time and duration are in milliseconds; the larger the value, the slower the animation execution is, not the faster it is. It is also possible to provide 'fast' and 'slow' strings, indicating durations of 200 and 600 milliseconds respectively.

Algorithm for easing animation movement:

The jQuery library is the default when swing is called. Animate at a constant speed. If you need other animation algorithms, please find the relevant plug-in

complete callback

Function executed when the animation is completed. This can ensure that the current animation is determined After completion, it will be triggered

　02.animate() method to execute multiple animations in sequence

When animate is executing the animation, if you need to observe some execution conditions of the animation, or during the animation To perform some other processing at a certain moment in progress, we can use animate to provide a second setting syntax, pass an object parameter, and get some notifications about the animation execution status.

.animate( properties, options )

options parameters

duration - Set the animation execution time

easing - Specify the easing function to be used, which transition to use Easing function
step: stipulates the function to be executed after each step of each animation is completed
progress: This callback will be executed every time the animation is called, which is a concept of progress
complete: callback when the animation is completed

If multiple elements perform animation, the callback will be executed once on each matching element, not once as the entire animation

List common methods

$(&#39;#elem&#39;).animate({
width: &#39;toggle&#39;,
height: &#39;toggle&#39;
}, {
duration: ,
specialEasing: {
width: &#39;linear&#39;,
height: &#39;easeOutBounce&#39;
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

Copy after login

Call the animate() method to create a custom animation effect. Its calling format is:

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

Among them, the params parameter is the name and value of the CSS property used to create the animation effect, the speed parameter is the speed of the animation effect, in milliseconds, and the optional callback parameter is the callback executed when the animation is completed. Function name.

For example, call the animate() method to display the picture with an animation effect from small to large, as shown below:

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$(&#39;img&#39;).animate({
width: &#39;px&#39;;
height:&#39;px&#39;
}, , function() {
$("#tip").html(&#39;执行完成！&#39;);
});
})
</script>
</body>

Copy after login

while browsing The effect displayed in the device:

How to use animate to customize animation in jQuery

As can be seen from the picture, the animate() method is called to display the picture elements with a gradually enlarging animation effect. When the animation is completed, Use the callback function to display the words "Execution Completed!" in the

element of the page.

For more related articles on how to use animate to customize animations in jQuery, please pay attention to the PHP Chinese website!