The jQuery animate method can be used to create a custom animation of your HTML elements simply with the use of CSS properties. This animate method modifies an element's style property in a gradual manner to create
the animation effect. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map
of CSS properties similar to the one that can be sent to the .css() method. Use "+=" or "-=" for relative animations.
Syntax
$(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|
| styles | Specifies one or more CSS properties and values to animate |
| speed | Optional, specifies the speed of the animation |
| easing | Optional, specifies an easing function (swing/linear) |
| callback | An optional function to run after the method is completed |
Styles
The styles listed in the following table use the DOM naming convention, not CSS. For example note that "paddingLeft" is not "padding-left".
| Style |
|---|
| backgroundPosition |
| borderBottomWidth |
| borderLeftWidth |
| borderRightWidth |
| borderSpacing |
| borderTopWidth |
| borderWidth |
| bottom |
| font |
| fontSize |
| height |
| left |
| letterSpacing |
| lineHeight |
| margin |
| marginBottom |
| marginLeft |
| marginRight |
| marginTop |
| maxHeight |
| maxWidth |
| minHeight |
| minWidth |
| outlineWidth |
| padding |
| paddingBottom |
| paddingLeft |
| paddingRight |
| paddingTop |
| right |
| textIndent |
| top |
| width |
| wordSpacing |
HTML Example
We will use the following HTML for the examples listed below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>
Example
Click the image button to animate the div with a number of different properties.
<script type="text/javascript">
$("#go").click(function () {
$("#div1").animate({
width: "82%",
height: "90px",
margin: "10px",
fontSize: "3em",
borderWidth: "5px"
}, 2000);
});
</script">
<script type="text/javascript">
$("#go").click(function () {
$("#div1")
.animate({width: "82%"}, "slow")
.animate({height: "90px"}, "slow");
});
</script">
Please help us spread the word by socializing it today!
Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.
Recommended Books & Training Resources
