30
Apr
2012

Simple animation using jQuery

Posted in: jQuery No Comments

jquery_logo
Playing with jQuery is really fun. In this tutorial I will show you, how jQuery can be used to perform cool animation.

Syntax:

.animate({'param': 'value', 'param2': 'value'}, speed);

Step 1: Prepare basic HTML page

<!DOCTYPE html>
<html>
<title>Simple animation using jQuery</title>
<head></head>
<body>
<a id="clickme" href="#">Click Me to animate below box</a>
<div id="animatebox">
<p>Animated box with jQuery</p>
</div>
</body>
</html>

Step 2: Add used CSS styles in head section.

<style type="text/css">
#animatebox {
background: #205e82;
color: #fff;
width: 150px;
height: 150px;
}
</style>

Step 3: Add jQuery library in head section.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4: Add jQuery animation code in head section. Below code will move #animation region to 200px right and 200px bottom. Animation will complete in 700 milliseconds.

<script type="text/javascript">
$(document).ready(function() {
$("a#clickme").click(function() {
$("#animatebox").animate({'margin-top': '200px', 'margin-left': '200px'},700);
});
});
</script>

So, our final code is:

<!DOCTYPE html>
<html>
<title>Simple animation using jQuery</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
body {
width: 960px;
margin: 0 auto;
margin-top: 40px;
padding: 0;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 14px;
}
#animatebox {
background: #205e82;
color: #fff;
width: 150px;
height: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("a#clickme").click(function() {
$("#animatebox").animate({'margin-top': '200px', 'margin-left': '200px'},700);
});
});
</script>
</head>
<body>
<a id="clickme" href="#">Click Me to animate below box</a>
<div id="animatebox">
<p>Animated box with jQuery</p>
</div>
</body>
</html>

Demo

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply