Description:
Jquery animation() method provide the custom animation with set of CSS properties.
Syntax
.animate( properties[duration ] [easing ] [complete ] ).animate( properties, options )
Ex :
$("#div").animate({ });
| params | params parameter defines the CSS properties to be animated. |
| Duration/speed | It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones. |
| Easing | It specifies the easing function to be used for transition (default value: swing). |
| Callback | A function to call once the animation is complete. |
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divflipBox").click(function () {
$("#divpanelBox").animate({
height: '+=20px',
width: '+=20px'
});
});
});
</script>
<style type="text/css">
#divflipBox, #divpanelBox {
background-color: #a0ce4e;
border: solid 1px black;
width: 25%;
}
#divpanelBox {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
</br>
<button id="divflipBox">
Click to Start Animation
</button>
</br> </br>
<div id="divpanelBox">
</div>
</body>
</html>
Output:
On Click of “Click to start animation” button, the “divpanelBox” started to append (css stlyle) the new height & width for the same and started to increasing the size of the div as shown below.
