Site icon T4Tutorials.com

JQuery code for Animating the div and come back to its origin

JQuery code for Animating the div and come back to its origin

JQuery code for Animating the div and come back to its origin.

Lets see the JQuery code for Animating the div and come back to its origin.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
            <button id ="btn">Click me</button>
          <br> <br>           
         <div style="background:green;border-radius:50%; height:200px;width:200px;position:absolute;"></div>

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

                      $("#btn").dblclick(function(){
                        $("div").animate({left: '0px'});
                      });
                      
                    });
                    </script> 
                    </body> </html>

Topic Covered

JQuery code for Animating the div and come back to its origin.

Exit mobile version