<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Easing demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> .graph { float: left; margin-left: 10px; } </style> <script> $(function() { if ( !$( "<canvas>" )[0].getContext ) { $( "<div>" ).text( "Your browser doesn't support canvas, which is required for this demo." ).appendTo( "#graphs" ); return; } var i = 0, width = 100, height = 100; $.each( $.easing, function( name, impl ) { var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; canvas.width = width; canvas.height = height; var drawHeight = height * 0.8, cradius = 10; ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; // draw background ctx.beginPath(); ctx.moveTo( cradius, 0 ); ctx.quadraticCurveTo( 0, 0, 0, cradius ); ctx.lineTo( 0, height - cradius ); ctx.quadraticCurveTo( 0, height, cradius, height ); ctx.lineTo( width - cradius, height ); ctx.quadraticCurveTo( width, height, width, height - cradius ); ctx.lineTo( width, 0 ); ctx.lineTo( cradius, 0 ); ctx.fill(); // draw bottom line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); // draw top line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); // plot easing ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; ctx.moveTo( width * 0.1, drawHeight ); $.each( new Array( width ), function( position ) { var state = position / width, val = impl( state, position, 0, 1, width ); ctx.lineTo( position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); // animate on click graph.click(function() { wrap .animate( { height: "hide" }, 2000, name ) .delay( 800 ) .animate( { height: "show" }, 2000, name ); }); graph.width( width ).height( height + text.height() + 10 ); }); }); </script> </head> <body> <div id="graphs"></div> <div class="demo-description"> <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> </div> </body> </html>