Home Ajax Jquery Animate Div in Jquery
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Animate Div in Jquery

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

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

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 28, 2013

Ask Questions?    Discuss: Animate Div in Jquery  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com