There are several jQuery methods that can be used for different purpose like jQuery .finish(), .queue(), .show(), .slideDown(), .slideUp(), .stop() and .toggle() etc.
In this article, we are using .animate() method to animate div in jQuery.
Animate Div in jQuery - jQuery .animate() Example
In jQuery the .animate() method is applicable on any numeric CSS property that required simple objects of CSS properties as its parameters.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate Div in Jquery</title>
<style>
div {
background-color: #abc;
width: 100px;
border: 1px solid red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">Animate my Div</div></br>
<button id="btn">Animate</button>
<script>
// Using multiple unit types within one animation.
$( "#btn" ).click(function() {
$( "#myDiv" ).animate({
width: "60%",
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "8px"
}, 1000 );
});
</script>
</body>
</html>