jQuery UI & Effects: Easing Effects

This entry is part 7 of 10 in the series jQuery UI Effects

jQuery UI Effects – Easing demo

All the easing effects in one page.  Just click on the graphs above to see the effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Easing demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .graph {
            float: left;
            margin-left: 10px;
        }
    </style>
    <script>
        $(function () {
            if (!$('<canvas>')[0].getContext) {
                $('<div>').text(
                        'Your browser does not 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>

</body>
</html>
Try The Code

Series Navigation<< jQuery UI & Effects: Switch class
jQuery UI & Effects: Diplay and show elements >>

Leave a comment

Leave a Reply