effects: demo visualising easing functions, tuning

diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index 72f535f67181220bb2de4dd7adc1c8838d996a32..189c3d6678010db9ef507ce57ad9ededdf12776f 100644 (file)
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -21,13 +21,9 @@
        <style type="text/css">\r
                .graph {\r
                        float: left;\r
-                       margin-left: 5px;\r
+                       margin-left: 10px;\r
                        width: 100px;\r
-                       height: 120px;\r
-               }\r
-               .graph canvas {\r
-                       border: 1px solid black;\r
-                       border-top: none; border-right: none;\r
+                       height: 160px;\r
                }\r
        </style>\r
        <script type="text/javascript">\r
@@ -46,21 +42,26 @@
                        \r
                        var canvas = $("<canvas/>").appendTo(graph)[0]\r
                        canvas.width = 100;\r
-                       canvas.height = 100;\r
+                       canvas.height = 135;\r
                        var ctx = canvas.getContext("2d");\r
-                       ctx.fillStyle = "rgb(255, 232, 198)";\r
-                       ctx.fillRect(0, 0, 100, 100);\r
-                       ctx.lineWidth = 1;\r
-                       $.each(new Array(10), function(index) {\r
-                               ctx.beginPath();\r
-                               ctx.moveTo(0, index * 10 + 10.5);\r
-                               ctx.lineTo(4, index * 10 + 10.5);\r
-                               ctx.moveTo(index * 10 + 10.5, 96);\r
-                               ctx.lineTo(index * 10 + 10.5, 100);\r
-                               ctx.stroke();\r
-                       });\r
+                       ctx.fillStyle = "black";\r
+                       ctx.beginPath();\r
+                       ctx.moveTo(10, 0);\r
+                       ctx.quadraticCurveTo(0, 0, 0, 10);\r
+                       ctx.lineTo(0, 125);\r
+                       ctx.quadraticCurveTo(0, 135, 10, 135);\r
+                       ctx.lineTo(90, 135);\r
+                       ctx.quadraticCurveTo(100, 135, 100, 125);\r
+                       ctx.lineTo(100, 0);\r
+                       ctx.lineTo(10, 0);\r
+                       ctx.fill();\r
+                       \r
+                       ctx.strokeStyle = "white";\r
+                       ctx.beginPath();\r
+                       ctx.moveTo(0, 100.5);\r
+                       ctx.lineTo(100, 100.5);\r
+                       ctx.stroke();\r
                        \r
-                       // needs higher precision for better graphs\r
                        var mod = 2;\r
                        ctx.beginPath();\r
                        $.each(new Array(100 * mod), function(position) {\r
@@ -70,7 +71,7 @@
                        });\r
                        ctx.stroke();\r
                        graph.click(function() {\r
-                               $(canvas).animate({height: "hide"}, "slow", name).animate({height: "show"}, "slow", name);\r
+                               $(canvas).animate({height: "hide"}, "slow", name).animate({"left": "0"}, 800).animate({height: "show"}, "slow", name);\r
                        });\r
                        //return false;\r
                });\r
@@ -95,3 +96,4 @@
 \r
 </body>\r
 </html>\r
+\r