jQuery Animate Effect

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.

backgroundPosition
borderBottomWidth
borderLeftWidth
borderRightWidth
borderSpacing
borderTopWidth
borderWidth
bottom
font
fontSize
height
left
letterSpacing
lineHeight
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
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

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