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.

Ads

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>

Advertisements

Share on Google+Share on Google+

Animate Div in Jquery

Posted on: December 28, 2013 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

Discuss: Animate Div in Jquery  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads