JQuery code for Animating the div to the top righ left bottom left right

Lets see the JQuery code for Animating the div to the top righ left bottom left right.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>

    <body>

            <button id ="btn1">right</button>
            <button id ="btn2">left</button>
            <button id ="btn3">bottom</button>
            <button id ="btn4">top</button>
          <br> <br>
                
         <div style="background:green; border-radius:50%; height:200px;width:200px;position:absolute;"></div>

            <script> 
                    $(document).ready(function(){
                      $("#btn1").click(function(){
                        $("div").animate({right: '200px'});
                      });

                      $("#btn2").click(function(){
                        $("div").animate({left: '10px'});
                      });
                      
                      $("#btn3").click(function(){
                        $("div").animate({bottom: '10px'});
                      });
                      
                      $("#btn4").click(function(){
                        $("div").animate({top: '50px'});
                      });

                    });
                    </script> 
                    </body> </html>

<html>

<head>

</head>

<body>

<button id ="btn1">right</button>

<button id ="btn3">bottom</button>

$(document).ready(function(){

$("#btn1").click(function(){

$("div").animate(

{right: '200px'});

});

$("#btn2").click(function(){

$("div").animate({left: '10px'});

});

$("#btn3").click(function(){

$("div").animate({bottom: '10px'});

});

$("#btn4").click(function(){

$("div").animate({top: '50px'});

});

</script>

</body> </html>