third-party/jquery-ui-1.10.2/demos/effect/easing.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Effects - Easing 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         .graph {
  12                 float: left;
  13                 margin-left: 10px;
  14         }
  15         </style>
  16         <script>
  17         $(function() {
  18                 if ( !$( "<canvas>" )[0].getContext ) {
  19                         $( "<div>" ).text(
  20                                 "Your browser doesn't support canvas, which is required for this demo."
  21                         ).appendTo( "#graphs" );
  22                         return;
  23                 }
  24
  25                 var i = 0,
  26                         width = 100,
  27                         height = 100;
  28
  29                 $.each( $.easing, function( name, impl ) {
  30                         var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
  31                                 text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
  32                                 wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
  33                                 canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
  34
  35                         canvas.width = width;
  36                         canvas.height = height;
  37                         var drawHeight = height * 0.8,
  38                                 cradius = 10;
  39                                 ctx = canvas.getContext( "2d" );
  40                         ctx.fillStyle = "black";
  41
  42                         // draw background
  43                         ctx.beginPath();
  44                         ctx.moveTo( cradius, 0 );
  45                         ctx.quadraticCurveTo( 0, 0, 0, cradius );
  46                         ctx.lineTo( 0, height - cradius );
  47                         ctx.quadraticCurveTo( 0, height, cradius, height );
  48                         ctx.lineTo( width - cradius, height );
  49                         ctx.quadraticCurveTo( width, height, width, height - cradius );
  50                         ctx.lineTo( width, 0 );
  51                         ctx.lineTo( cradius, 0 );
  52                         ctx.fill();
  53
  54                         // draw bottom line
  55                         ctx.strokeStyle = "#555";
  56                         ctx.beginPath();
  57                         ctx.moveTo( width * 0.1, drawHeight + .5 );
  58                         ctx.lineTo( width * 0.9, drawHeight + .5 );
  59                         ctx.stroke();
  60
  61                         // draw top line
  62                         ctx.strokeStyle = "#555";
  63                         ctx.beginPath();
  64                         ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
  65                         ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
  66                         ctx.stroke();
  67
  68                         // plot easing
  69                         ctx.strokeStyle = "white";
  70                         ctx.beginPath();
  71                         ctx.lineWidth = 2;
  72                         ctx.moveTo( width * 0.1, drawHeight );
  73                         $.each( new Array( width ), function( position ) {
  74                                 var state = position / width,
  75                                         val = impl( state, position, 0, 1, width );
  76                                 ctx.lineTo( position * 0.8 + width * 0.1,
  77                                         drawHeight - drawHeight * val * 0.7 );
  78                         });
  79                         ctx.stroke();
  80
  81                         // animate on click
  82                         graph.click(function() {
  83                                 wrap
  84                                         .animate( { height: "hide" }, 2000, name )
  85                                         .delay( 800 )
  86                                         .animate( { height: "show" }, 2000, name );
  87                         });
  88
  89                         graph.width( width ).height( height + text.height() + 10 );
  90                 });
  91         });
  92         </script>
  93 </head>
  94 <body>
  95
  96 <div id="graphs"></div>
  97
  98 <div class="demo-description">
  99 <p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
 100 </div>
 101 </body>
 102 </html>