StefiIOE

animations

Jun 21st, 2020
1,577
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script src = "jquery-3.5.1.min.js"></script>
  5.     <script>
  6.         $(document).ready(function () {
  7.             $("button").click(function () {
  8.                 $(".div").animate({height:'300px',opacity:'0,5'},"slow");
  9.                 $(".div").animate({width:'300px',opacity:'0.7'},"slow");
  10.                 $(".div").animate({height:'100px',opacity:'0.8'},"slow");
  11.                 $(".div").animate({width:'100px',opacity:'0.9'},"slow");
  12.  
  13.             });
  14.  
  15.         });
  16.  
  17.         $(document).ready(function () {
  18.             $("button").click(function () {
  19.                 $(".div1").animate({left:'110px'});
  20.                 $(".div1").animate({height: '300px', opacity: '0,5'}, "slow");
  21.                 $(".div1").animate({width: '300px', opacity: '0.7'}, "slow");
  22.                 $(".div1").animate({height: '100px', opacity: '0.8'}, "slow");
  23.                 $(".div1").animate({width: '100px', opacity: '0.9'}, "slow");
  24.  
  25.             });
  26.         });
  27.  
  28.  
  29.     </script>
  30. </head>
  31. <body>
  32. <button>click me!</button>
  33. <div class="div" style="background-color: #1c94c4;width: 100px;height: 100px;position: absolute"></div>
  34. <div class="div1" style="background-color: black;width: 100px;height: 100px;position: absolute"></div>
  35. </body>
  36. </html>
RAW Paste Data