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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |