third-party/jquery-ui-1.10.2/tests/visual/addClass/queue.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>addClass Visual Test : Queue</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         <style>
  10         .box {
  11                 width: 100px;
  12                 height: 100px;
  13                 background-color: #000;
  14         }
  15         .red {
  16                 background-color: #f00;
  17         }
  18         .green {
  19                 background-color: #0f0;
  20         }
  21         .blue {
  22                 background-color: #00f;
  23         }
  24         </style>
  25         <script>
  26         $(function() {
  27                 $( "#box1" )
  28                         .delay( 500 )
  29                         .addClass( "red", 2000 )
  30                         .delay( 500 )
  31                         .addClass( "green", 2000 )
  32                         .delay( 500 )
  33                         .addClass( "blue", 2000 );
  34                 $( "#box2" )
  35                         .addClass( "red", 2000 )
  36                         .delay( 500 )
  37                         .addClass( "green", 2000 )
  38                         .delay( 500 )
  39                         .addClass( "blue", 2000 );
  40         });
  41         </script>
  42 </head>
  43 <body>
  44
  45 <p>WHAT: The two boxes animate from black to red to green to blue.</p>
  46 <p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p>
  47
  48 <div id="box1" class="box"></div>
  49 <div id="box2" class="box"></div>
  50
  51 </body>
  52 </html>