animate div using jquery

You can animate any css property using CSS, here is the easiest tutorial of <strong>animate div using jquery</strong>

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<a href="#" id="left">Annimate Left</a>|
<a href="#" id="right">Annimate Right</a>|
<a href="#" id="top">Annimate Top</a>|
<a href="#" id="bottom">Annimate Bottom</a>
<div id="maindiv"></div>

CSS

#maindiv
{
	width:300px;
	height:300px;
	background:#CCCC00;
	margin-top:50px;
}

JavaScript

$(document).ready(function(e) {
    $('#left').click(function(){
		$('#maindiv').animate({"marginLeft":"-30px"},500);
		});
	$('#right').click(function(){
		$('#maindiv').animate({"marginLeft":"30px"},500);
		});
	$('#top').click(function(){
		$('#maindiv').animate({"marginTop":"-30px"},500);
		});
	$('#bottom').click(function(){
		$('#maindiv').animate({"marginTop":"30px"},500);
		});			
});