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> |
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