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>

Author
Recent Posts

Prof. Fazal Rehman Shamil

CEO @ T4Tutorials.com
I welcome to all of you if you want to discuss about any topic. Researchers, teachers and students are allowed to use the content for non commercial offline purpose. Further, You must use the reference of the website, if you want to use the partial content for research purpose.

Latest posts by Prof. Fazal Rehman Shamil (see all)

List of Public service commissions - August 31, 2020
Comparison of fee structure of Pakistani Universities - June 1, 2020
Past Guess Paper of Auditing - May 12, 2020

Buy advertisement space on T4Tutorials

For more details email [email protected]

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

<img class="size-full wp-image-29991 aligncenter" src="https://t4tutorials.com/wp-content/uploads/2019/10/JQuery-code-for-Animating-the-div-to-the-top-righ-left-bottom-left-right.webp" alt="JQuery code for Animating the div to the top righ left bottom left right" />

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

Buy advertisement space on T4Tutorials