daniramadhan7

JQuery Booklist

Dec 6th, 2021
747
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <title>jQuery Color Animation</title>
  10.     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  11.     <link rel="stylesheet" href="/resources/demos/style.css">
  12.  
  13.     <!-- Bootstrap CSS -->
  14.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  15.     <style>
  16.         .toggler {
  17.             width: 500px;
  18.             height: 210px;
  19.             position: relative;
  20.         }
  21.  
  22.         #button {
  23.             padding: .5em 1em;
  24.             text-decoration: none;
  25.         }
  26.  
  27.         #effect {
  28.             width: 240px;
  29.             height: 210px;
  30.             padding: 0.4em;
  31.             position: relative;
  32.             background: #fff;
  33.         }
  34.  
  35.         #effect h3 {
  36.             margin: 0;
  37.             padding: 0.4em;
  38.             text-align: center;
  39.         }
  40.     </style>
  41.     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  42.     <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  43.     <script>
  44.         $(function () {
  45.             var state = true;
  46.             $("#button").on("click", function () {
  47.                 if (state) {
  48.                     $("#effect").animate({
  49.                         backgroundColor: "#aa0000",
  50.                         color: "#fff",
  51.                         width: 500
  52.                     }, 1000);
  53.                 } else {
  54.                     $("#effect").animate({
  55.                         backgroundColor: "#fff",
  56.                         color: "#000",
  57.                         width: 240
  58.                     }, 1000);
  59.                 }
  60.                 state = !state;
  61.             });
  62.         });
  63.     </script>
  64. </head>
  65.  
  66. <body>
  67.  
  68.     <div class="toggler">
  69.         <div id="effect" class="ui-widget-content ui-corner-all">
  70.             <h3 class="ui-widget-header ui-corner-all">Animate</h3>
  71.             <p>
  72.                 Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing
  73.                 ut, luctus
  74.                 sed, hendrerit vitae, mi.
  75.             </p>
  76.         </div>
  77.     </div>
  78.  
  79.     <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
  80.  
  81.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  82. </body>
  83.  
  84. </html>
RAW Paste Data