jQuery Tutorials
jQuery Introduction
jQuery Get Started
jQuery Syntax
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering
jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post
jQuery Misc
jQuery noConflict()
jQuery Filters
Previous
jQuery Effects - Animation
jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax:
The required parameter defines the CSS features to be animated.
Optional speed parameter specifies the duration of the output. It can take the following values: "slow", "fast", or milliseconds.
The re-dialing parameter you choose is the function to be used after the animation is completed.
The following example illustrates the easy use of the animate() method; moves
Example
$("div").animate({left: '250px'});
});
By default, all HTML elements have a fixed location, and cannot be deleted.
To control the position, remember to preset the CSS feature for the relative, fixed, or complete!
jQuery animate() - Manipulate Multiple Properties
Note that multiple properties can be animated at the same time:
Example
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Is it possible to manipulate ALL CSS properties with the animate() method?
Yes, almost! However, there is one important thing to remember: all place names must be camel when used with animate () method: You will need to type paddingLeft instead of padding-left, marginRight instead of marine-right, and so on.
Also, color animation is not included in the main jQuery library.
If you want to animate a color, you need to download the Color Animations plugin from jQuery.com.
jQuery animate() - Using Relative Values
It is also possible to define related values (value is then associated with the current value of the element). This is done by setting + = or - = before the value:
Example
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Using Pre-defined Values
You can even specify a property animation value such as "show", "hide", or "toggle":
Example
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Uses Queue Functionality
By default, jQuery comes with animation line functionality.
This means that if you compose multiple animate() calls one after another, jQuery creates an "in-line" line with these route calls. Then launch the dial-up wires ONCE.
So, if you want to do a different animation after another, we use the line function:
Example 1
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
The example below first moves the <div> part to the right, and then increases the font size of the text:
Example 2
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});