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">
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
