jQuery animation

jQuery animation - animate() method

The jQuery animate() method is used to create custom animations.

grammar:

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

The required params parameter defines the CSS properties that form the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function that is executed after the animation completes.

The following example demonstrates a simple application of the animate() method. It moves the <div> element to the right by 250 pixels:

Instance 
Run the program and try it out

Tip : By default, all HTML elements have a static location and are not mobile. If we need to change to, we need to set the element's position property to relative, fixed, or absolute!

jQuery animate() - manipulate multiple properties


Note that multiple properties can be used simultaneously during animation generation:

 
Run the program and try it out

jQuery animate() - use relative values


You can also define a relative value that is relative to the current value of the element. You need to precede the value with += or -=:

Run the program and try it out

jQuery animate() - use predefined values


You can even set the animation value of the property to "show", "hide" or "toggle":

 
Run the program and try it out

jQuery animate() - use queue function


By default, jQuery provides a queue function for animation.

This means that if you write multiple animate() calls after each other, jQuery will create an "internal" queue containing these method calls. Then run these animate calls one by one.


Run the program and try it out

The following example moves the <div> element to the right by 100 pixels and then increases the font size of the text:

 
Run the program and try it out


Last Updated: 2018-11-24 14:32:14 By Akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :