12181632_DanangIsAJI

12181632_Animasi jQuery

May 6th, 2020
312
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Desain Web</title>
  6. <script src="jquery-1.9.1.js"></script>
  7. <script>
  8.     $(document).ready(function(){
  9.         $( "#tombol_animasi" ).click(function(){
  10.             $( "#box" ).animate({
  11.                 width : "80%",
  12.                 height : "80px",
  13.                 opacity : 0.4
  14.             });
  15.         });
  16.     });
  17. </script>
  18. <style>
  19.     #box {
  20.     width: 100px;
  21.     height : 50px;
  22.     background-color : silver;
  23.     border: 2px solid black;
  24.     padding :0 10px;
  25.     }
  26. </style>
  27. </head>
  28. <body>
  29.     <h2>Praktik Animasi jQuery</h2>
  30.     <button id="tombol_animasi">Buka Box</button>
  31.     <br></br>
  32.     <div id="box"></div>
  33. </body>
  34. </html>
  35.  
  36. <!--Mengatur Durasi Animasi jQuery-->
  37. <!DOCTYPE html>
  38. <html>
  39. <head>
  40. <meta charset="UTF-8">
  41. <title>Desain Web</title>
  42. <script src="jquery-1.9.1.js"></script>
  43. <script>
  44.     $(document).ready(function(){
  45.         $( "#tombol_animasi" ).click(function(){
  46.             $( "#box" ).animate({
  47.                 width : "80%",
  48.                 height : "80px",
  49.                 opacity : 0.4
  50.             }, "slow");
  51.             $( "#paragraf" ).animate({
  52.             fontSize : "40px",
  53.             }, 3000);
  54.         });
  55.     });
  56. </script>
  57. <style>
  58.     #box {
  59.     width: 100px;
  60.     height : 50px;
  61.     background-color : pink;
  62.     border: 2px solid black;
  63.     }
  64. </style>
  65. </head>
  66. <body>
  67.     <h2>Praktik Animasi jQuery</h2>
  68.     <button id="tombol_animasi">Buka Box</button>
  69.     <br></br>
  70.     <div id="box"></div>
  71.     <p id="paragraf">Hellooo, I'am here...</p>
  72. </body>
  73. </html>
RAW Paste Data