js animation

by Mayank Khanna

HTML

<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>

<br><br>
<div class="box">
</div>

CSS

.box{
  background:grey;
height:20px;
width:20px;
position:absolute;
}

JavaScript

$(document).ready(function(){
    $("#one").click(function(){
        $("div").animate({top: '250px'});
    });
});

$(document).ready(function(){
    $("#sec").click(function(){
        $("div").animate({bottom: '250px'});
    });
});

$(document).ready(function(){
    $("#thi").click(function(){
        $("div").animate({right: '250px'});
    });
});

$(document).ready(function(){
    $("#for").click(function(){
        $("div").animate({left: '250px'});
    });
});