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.
backgroundPositionborderBottomWidthborderLeftWidthborderRightWidthborderSpacingborderTopWidthborderWidthbottomfontfontSizeheightleftletterSpacinglineHeightmarginmarginBottommarginLeftmarginRightmarginTopmaxHeightmaxWidthoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingToprighttextIndenttopwidthwordSpacing
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
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">
