Animate Div in Jquery

jQuery animation enables you to animate text and images in HTML. You can do a lot of thing using the jQuery effects for example animating text, images, text area etc.

Animate Div in Jquery

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>