third-party/jquery-ui-1.10.2/demos/animate/default.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Effects - Animate demo</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.effect.js"></script>
   9         <link rel="stylesheet" href="../demos.css">
  10         <style>
  11                 .toggler { width: 500px; height: 200px; position: relative; }
  12                 #button { padding: .5em 1em; text-decoration: none; }
  13                 #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
  14                 #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  15         </style>
  16         <script>
  17         $(function() {
  18                 var state = true;
  19                 $( "#button" ).click(function() {
  20                         if ( state ) {
  21                                 $( "#effect" ).animate({
  22                                         backgroundColor: "#aa0000",
  23                                         color: "#fff",
  24                                         width: 500
  25                                 }, 1000 );
  26                         } else {
  27                                 $( "#effect" ).animate({
  28                                         backgroundColor: "#fff",
  29                                         color: "#000",
  30                                         width: 240
  31                                 }, 1000 );
  32                         }
  33                         state = !state;
  34                 });
  35         });
  36         </script>
  37 </head>
  38 <body>
  39
  40 <div class="toggler">
  41         <div id="effect" class="ui-widget-content ui-corner-all">
  42                 <h3 class="ui-widget-header ui-corner-all">Animate</h3>
  43                 <p>
  44                         Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
  45                 </p>
  46         </div>
  47 </div>
  48
  49 <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
  50
  51 <div class="demo-description">
  52 <p>Click the button above to preview the effect.</p>
  53 </div>
  54 </body>
  55 </html>