HarisF

Praktek Animasi jQuery

May 8th, 2020
276
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Deain 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.         }, "slow");
  15.         $("#paragraf").animate({
  16.           fontSize: "40px",
  17.          }, 3000);
  18.      });
  19.     })
  20.     </script>
  21.     <style>
  22.       #box {
  23.         width: 100px;
  24.         height: 50px;
  25.         background-color: silver;
  26.         border: 2px solid black;
  27.         padding: 0 10px;
  28.      }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h2>Praktik Animasi jQuery</h2>
  33.     <button id="tombol_animasi">Buka BOx</button>
  34. <br><br>
  35.     <div id="box"></div>
  36.     <p id="paragraf">Hellooo, I'am here....</p>
  37. </body>
  38. </html>
RAW Paste Data