jQuery Effects Animation - The animate() Method
You can generate your custom animations with jQuery.
jQuery Animations - The animate() Method
To make custom animations, utilise the jQuery animate()
function.
Syntax :-
$(selector).animate({params},speed,callback);
The params
argument is mandatory. The speed
and callback
parameters are optional.
The CSS attributes to be animated are defined by the required params
option.
The duration of the effect is determined by the speed
parameter. The supported values are
"Slow", "Fast", or milliseconds.
The callback
parameter specifies a function that will be run once the animation is finished.
Example :- A basic use of animation shows this example; it moves a div
element to the right
until the CSS left
property is 250px.
Output :-
Note:- All HTML elements have a fixed position that cannot be changed by default.
Remember to set the element's CSS position
attribute to relative
,
fixed
, or absolute
before manipulating the position.
jQuery animate() - Manipulate Multiple Properties
You can use more than one CSS attribute to animate an HTML element. It's worth noting that you may animate many attributes at the same time.
Example :-
Output :-
Is it feasible to use the animation()
technique to change ALL CSS properties?
Yeah, nearly! But it is crucial to remember: while using the animate()
function,
all property names must be camel-cased: Instead of padding-left, you have to type paddingLeft,
marginRight rather than margin-right.
The basic jQuery library also does not feature colour animation. You need to get the Color Animations plugin from jQuery.com if you wish to animate colour.
Related Links
jQuery animate() - Using Relative Values
Relative values can also be defined (the value is then relative to the element's current value). This is accomplished by placing += or -= in front of the value :
Output :-
jQuery animate() - Using Pre-defined Values
You may even use the terms "display
", "hide
", or "toggle
" to describe the animation value of a property :
Related Links
jQuery animate() - Uses Queue Functionality
jQuery includes animation queue capabilities by default.
This implies that with these method calls, jQuery generates a "internal" queue if you write several
animate()
calls each other. The animated calls are then executed ONE by ONE.
So we take advantage of the queue capability if you want to make various animations from one another.
Example 1:-
Hello
Output :-