document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  7.         <link rel="stylesheet" href="/resources/demos/style.css">
  8.         <link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
  9.  
  10.         <title>Toggle Effect</title>
  11.  
  12.         <style type="text/css">
  13.             body
  14.             {
  15.                 font-size: 12px;
  16.                 font-family: Arial, Helvetica, sans-serif;
  17.             }
  18.  
  19.             #button
  20.             {
  21.                 font-size: 12px;
  22.                 font-family: Arial, Helvetica, sans-serif;
  23.             }
  24.         </style>
  25.  
  26.         <style>
  27.             .toggler
  28.             {
  29.                 margin-left: 553px;
  30.                 margin-top: 160px;
  31.                 width: 500px;
  32.                 height: 200px;
  33.                 position: relative;
  34.             }
  35.  
  36.             #button
  37.             {
  38.                 margin-left: 620px;
  39.                 padding: .5em 1em;
  40.                 text-decoration: none;
  41.             }
  42.  
  43.             #effect
  44.             {
  45.                 width: 240px;
  46.                 height: 170px;
  47.                 padding: 0.4em;
  48.                 position: relative;
  49.             }
  50.  
  51.             #effect h3
  52.             {
  53.                 margin: 0;
  54.                 padding: 0.4em;
  55.                 text-align: center;
  56.             }
  57.  
  58.             body
  59.             {
  60.                 background-image: url(image/show.jpg);
  61.                 background-size: cover;
  62.                 background-repeat: no-repeat;
  63.                 background-position: center;
  64.                 background-attachment: fixed;
  65.                 height: 100%;
  66.             }
  67.         </style>
  68.  
  69.         <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  70.         <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  71.  
  72.         <script>
  73.             $( function()
  74.             {
  75.               var state = true;
  76.               $( "#button" ).on( "click", function()
  77.               {
  78.                 if ( state )
  79.                 {
  80.                   $( "#effect" ).animate
  81.                   ({backgroundColor: "rgb(238, 108, 77)", width: 500}, 1000 );
  82.                 }
  83.                 else
  84.                 {
  85.                   $( "#effect" ).animate
  86.                   ({backgroundColor: "rgb(255, 255, 255)", width: 240}, 1000 );
  87.                 }
  88.                 state = !state;
  89.               });
  90.             } );
  91.         </script>
  92.     </head>
  93.  
  94.     <body>
  95.         <div class="toggler">
  96.             <div id="effect" class="ui-widget-content ui-corner-all">
  97.                 <h3 class="ui-widget-header ui-coner-all">Animate</h3>
  98.             </div>
  99.         </div>
  100.  
  101.         <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
  102.     </body>
  103. </html>
');