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