|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
5 <title>jQuery UI Effects - Effect Demo</title> |
|
6 <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
|
7 <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
|
8 <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> |
|
9 <link type="text/css" href="../demos.css" rel="stylesheet" /> |
|
10 <style type="text/css"> |
|
11 .graph { |
|
12 float: left; |
|
13 margin-left: 10px; |
|
14 } |
|
15 </style> |
|
16 <script type="text/javascript"> |
|
17 $(function() { |
|
18 if (!$("<canvas/>")[0].getContext) { |
|
19 $("<div/>").text("Your browser doesn't support canvas, which is required for this demo. Give Firefox 3 a try!").appendTo("#graphs"); |
|
20 return; |
|
21 } |
|
22 var i = 0; |
|
23 var width = 100, |
|
24 height = 100; |
|
25 $.each($.easing, function(name, impl) { |
|
26 // skip linera/jswing and any non functioning implementation |
|
27 if (!$.isFunction(impl) || /jswing/.test(name)) |
|
28 return; |
|
29 var graph = $("<div/>").addClass("graph").appendTo("#graphs"); |
|
30 var text = $("<div/>").text(++i + ". " + name).appendTo(graph); |
|
31 |
|
32 var canvas = $("<canvas/>").appendTo(graph)[0] |
|
33 canvas.width = width; |
|
34 canvas.height = height; |
|
35 var drawHeight = height * 0.8; |
|
36 var cradius = 10; |
|
37 var ctx = canvas.getContext("2d"); |
|
38 ctx.fillStyle = "black"; |
|
39 |
|
40 ctx.beginPath(); |
|
41 ctx.moveTo(cradius, 0); |
|
42 ctx.quadraticCurveTo(0, 0, 0, cradius); |
|
43 ctx.lineTo(0, height - cradius); |
|
44 ctx.quadraticCurveTo(0, height, cradius, height); |
|
45 ctx.lineTo(width - cradius, height); |
|
46 ctx.quadraticCurveTo(width, height, width, height - cradius); |
|
47 ctx.lineTo(width, 0); |
|
48 ctx.lineTo(cradius, 0); |
|
49 ctx.fill(); |
|
50 |
|
51 ctx.strokeStyle = "#555"; |
|
52 ctx.beginPath(); |
|
53 ctx.moveTo(width * 0.1, drawHeight + .5); |
|
54 ctx.lineTo(width * 0.9, drawHeight + .5); |
|
55 ctx.stroke(); |
|
56 |
|
57 ctx.strokeStyle = "#555"; |
|
58 ctx.beginPath(); |
|
59 ctx.moveTo(width * 0.1, drawHeight * .3 - .5); |
|
60 ctx.lineTo(width * 0.9, drawHeight * .3 - .5); |
|
61 ctx.stroke(); |
|
62 |
|
63 ctx.strokeStyle = "white"; |
|
64 ctx.beginPath(); |
|
65 ctx.lineWidth = 2; |
|
66 ctx.moveTo(width * 0.1, drawHeight); |
|
67 $.each(new Array(width), function(position) { |
|
68 var val = impl(0, position, 0, 1, height); |
|
69 if (/linear|jswing/.test(name)) val = position / width; |
|
70 ctx.lineTo(position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7); |
|
71 }); |
|
72 ctx.stroke(); |
|
73 graph.click(function() { |
|
74 $(canvas).animate({height: "hide"}, 2000, name).animate({"left": "0"}, 800).animate({height: "show"}, 2000, name); |
|
75 }); |
|
76 |
|
77 graph.width(width).height(height + text.height() + 10); |
|
78 //return false; |
|
79 }); |
|
80 }); |
|
81 </script> |
|
82 </head> |
|
83 <body> |
|
84 |
|
85 <div class="demo"> |
|
86 |
|
87 <div id="graphs"></div> |
|
88 |
|
89 <div id="animted"></div> |
|
90 |
|
91 </div><!-- End demo --> |
|
92 |
|
93 <div class="demo-description"> |
|
94 |
|
95 <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> |
|
96 |
|
97 </div><!-- End demo-description --> |
|
98 |
|
99 </body> |
|
100 </html> |
|
101 |