Random Animacija 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rezerva</title>
    <link rel="stylesheet" href="jquery_ui.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>
    .box{
        background: black;
        height: 50px;
        width: 50px;
    }
    .red{
        background: red;

    }
    </style>
</head>
<body>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<button id="moveLeft">Move Left</button>
<button id="moveRight">Move Right</button>
<div class="box">

</div>
<script>
$("#moveUp").click(function (){
    $(".box").animate({
        marginTop:"-=50px"
    },1000)
})
$("#moveDown").click(function (){
  $(".box").animate({
      marginTop:"+=50px"
  },1000)
})
$("#moveLeft").click(function (){
    $(".box").animate({
        marginLeft:"-=50px"
    },1000)
})
$("#moveRight").click(function (){
    $(".box").animate({
        marginLeft:"+=50px"
    },1000)
})
$(".box").click(function (){
    $(this).toggleClass('red')
})
</script>
</body>
</html>