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" );
});