jQuery effects - Animation

jQuery allows us to create custom animations.

jQuery animation-animate() method

jQuery animate()a method that performs custom animations on a set of CSS properties.

This isanimate()The syntax of the method:

$(selector).animate({styles}, duration, easing, callback)

Parameters:

• {styles} -Specify the CSS property and value object to which the animation will move

• duration -Determine how long the animation effect will run. Possible values: "slow", "fast", or milliseconds

• easing -Indicate the easing function to be used for the transition. Possible values: "swing", "linear"

• callback-Specify a function to be called after the animate() method completes

The following example demonstrates how to animate an element by changing its width:

$("button").click(function(){
　　$("div").animate({width: ''})500px"});
});

The following example animates the element by changing its position:

$("button").click(function(){
　　$("div").animate({left: ''"500px"});
});

jQuery animate()-Setting Multiple Properties

We can also animate multiple properties of an element at the same time.

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px'',
　　　　height: ''"400px'',
　　　　opacity: ''0.3,
　　　　left: ''"50px"
　　});
});

The following example demonstrates using animate()durationandeasingParameters:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px'',
　　　　height: ''"400px"
　　},　4000, ''linear'');
});

The following example demonstrates using animate()CallbackParameters:

$("button").click(function(){
　　$("div").animate({
　　　　width: ''"500px'',
　　　　height: ''"400px"
　　},　500, ''linear'',
　　function() {
　　　　$("this").after("<h2>Animation is complete</h2>");
　　});
});

jQuery animate()-Using Queue Animations

By default, jQuery has a queue feature for animations.

In the queue, one or more functions wait to be executed.

This means that if you write multiple animate() calls one after another, jQuery will use these method calls to create an 'internal' queue. Then, it runs the animation calls one by one.

The following example first changes the width of the DIV element, then the height, and then increases the font size of the text:

$("button").click(function(){
　　let div = $("div");
　　div.animate({width: ''"500px"});
　　div.animate({height: ''"200px"});
　　div.animate({fontSize: ''"10em"});
});

We can also use jQuery's chaining feature to animate multiple properties of an element one by one in a queue.

$("button").click(function(){
　　$("div")
　　　　.animate({width: ''"500px"})
　　　　.animate({height: ''"200px"})
　　　　.animate({fontSize: ''"10em"})
　　　　.animate({opacity: 0.3});
});

You will learn more about links in the later part of this tutorial.

jQuery animate()-Using Relative Values

The animation attribute can also be relative. If a leading+or-If a string sequence is specified, the target value is calculated by adding or subtracting the given number from the current value of the attribute.

$("p").click(function(){
　　$("this").animate({
　　　　fontSize: ""+=5px",
　　　　padding: ""+=10px"
　　});
});

jQuery animate()-Using Predefined Values

In addition, we can even specify the animation value of the attribute as "show", "hide", or "toggle":

$("button").click(function(){
　　$("div").animate({height: "toggle"});
});

jQuery Effect Reference

For complete effect references, please visit ourjQuery Effect Reference Manual.