animation() Effect in Jquery

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({ });

1	$("#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>

<html>

<head>

$(document).ready(function () {

$("#divflipBox").click(function () {

$("#divpanelBox").animate({

height: '+=20px',

width: '+=20px'

});

</script>

#divflipBox, #divpanelBox {

background-color: #a0ce4e;

border: solid 1px black;

width: 25%;

}

#divpanelBox {

width: 30px;

height: 30px;

}

</style>

</head>

<body>

</br>

Click to Start Animation

</button>

</br> </br>

</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.

animation() Effect in Jquery