Kolokviumska so kopcinja i mrdanje na element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kolokviumska</title>
    <link rel="stylesheet" href="jquery_ui.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>
        #div1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="div1">

</div>
<script>
    var btn1=document.createElement('button');
    var text1=document.createTextNode('UP');
    btn1.appendChild(text1);
    document.body.appendChild(btn1);

    var btn2=document.createElement('button');
    var text2=document.createTextNode('DOWN');
    btn2.appendChild(text2);
    document.body.appendChild(btn2)

    var btn3=document.createElement('button');
    var text3=document.createTextNode('RIGHT');
    btn3.appendChild(text3);
    document.body.appendChild(btn3);

    var btn4=document.createElement('button');
    var text4=document.createTextNode('LEFT');
    btn4.appendChild(text4);
    document.body.appendChild(btn4)

    var btn5=document.createElement('button');
    var text5=document.createTextNode('CHANGE COLOR');
    btn5.appendChild(text5);
    document.body.appendChild(btn5);


    $(document).ready(function (){
        $(btn1).click(function (){
            $("#div1").animate({
                top:"100px" //od top se dvizi nadole 10px
            });
        });
        $(btn2).click(function (){
            $("#div1").animate({
                bottom:"-=10px" //od bottom nagore ostava odreden prostor
                //koga ima -= na sekoj klik se dvizi za 10px
            })
        })
        $(btn3).click(function (){
            $("#div1").animate({
                right:"-=10px" //na sekoj klik na right se dvizi za 10px
            })
        })
        $(btn4).click(function (){
            $("#div1").animate({
                //left:"10px" //ako e smao vaka se mrdna ednas za 10px
                left:"+=10px"
            })
        })
    })
</script>
</body>
</html>