Animates a div left and top property with a relative value
For example, Animates a div left and top property with a relative value...
Demo
HTML
<div class="animates-block"> <button id="top">Top</button> <button id="bottom">Bottom</button> <button id="left">Left</button> <button id="right">Right</button> <div class="block"></div> </div>
CSS
<style> .animates-block { position: relative; height:150px; } .block { background-color: #037cd5; width:100px; height:100px; position: absolute; left: 50px; } </style>
Javascript
$("#top").click(function(){ $(".block").animate({ "top": "-=100px" }, "slow" ); }); $("#bottom").click(function(){ $(".block").animate({ "top": "+=100px" }, "slow" ); }); $("#left").click(function(){ $(".block").animate({ "left": "-=100px" }, "slow" ); }); $("#right").click(function() { $(".block").animate({ "left": "+=100px" }, "slow" ); });