Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add a comparision demo to the easing page, showing easings happen sid…

…e by side.
  • Loading branch information...
commit cd0ab13dcfa21baff4f1f2ccf3903f27ab0bbb24 1 parent 9eeea1c
Jörn Zaefferer jzaefferer authored
2  grunt.js
View
@@ -14,7 +14,7 @@ grunt.initConfig({
grunt: "grunt.js"
},
watch: {
- files: entryFiles,
+ files: entryFiles.concat( grunt.file.expandFiles( "resources/**") ),
tasks: "deploy"
},
xmllint: {
3  pages/easings.html
View
@@ -8,5 +8,6 @@
<p>The best way to understand how an easing will affect an animation is to see the equation graphed over time. See below for a graph of all animations available in jQuery UI.</p>
-<iframe src="/resources/easing-graph.html" width="100%" height="700"></iframe>
+<iframe src="/resources/easing-graph.html" width="100%" height="600"></iframe>
+<iframe src="/resources/easing-comparison.html" width="100%" height="500"></iframe>
<category slug="utilities"/>
116 resources/easing-comparison.html
View
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects - Easing Comparison demo</title>
+ <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
+ <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
+ <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
+ <style>
+ body {
+ font-size: 62.5%;
+ font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
+ }
+ #tracks {
+ margin: 0 150px;
+ }
+ #tracks div {
+ border: 2px solid #eee;
+ padding: 8px;
+ height: 20px;
+ margin: 14px;
+ position: relative;
+ font-size: 1.1em;
+ }
+ #tracks .box {
+ padding: 5px;
+ left: 5px;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ background: red;
+ border-radius: 50%;
+ }
+ #tracks .label {
+ padding-left: 24px;
+ font-size: 1.1em;
+ line-height: 20px;
+ }
+ </style>
+ <script>
+ $(function() {
+ function addEasing( easing ) {
+ var box = $( "<span>" )
+ .addClass( "box" )
+ .data( "easing", easing );
+ var label = $( "<span>" )
+ .addClass( "label" )
+ .text( easing );
+ $( "<div>")
+ .append( box )
+ .append( label )
+ .appendTo( tracks );
+ }
+
+ var addForm = $( "#add-easing" ),
+ addSelect = addForm.find( "select" ),
+ tracks = $( "#tracks" ),
+ startButton = $( "#start-race" );
+
+ $.each( $.easing, function( name ) {
+ $( "<option>" ).text( name ).appendTo( addSelect );
+ });
+ addSelect.change(function() {
+ addEasing( this.value );
+ });
+
+ addForm.submit(function( event ) {
+ event.preventDefault();
+ addEasing( addSelect.val() );
+ });
+
+ tracks.on( "click", "div", function() {
+ $( this ).remove();
+ });
+
+ startButton.click(function() {
+ tracks.find( "span" ).each(function() {
+ var car = $( this );
+ car
+ .stop( true, true )
+ .css({
+ left: 5
+ })
+ .animate({
+ left: tracks.width() - car.width() - 50
+ }, 2500, car.data( "easing" ) )
+ .delay( 300 )
+ .animate({
+ left: 5
+ }, 2500, car.data( "easing" ) );
+ });
+ });
+
+ addEasing( "linear" );
+ addEasing( "swing" );
+ addEasing( "easeOutBounce" );
+ });
+ </script>
+</head>
+<body>
+
+<div id="add-easing">
+ Select an easing here, click track below to remove
+ <select ></select>
+</div>
+
+<div id="tracks">
+</div>
+<button id="start-race">Start The Race</button>
+
+<div class="demo-description">
+ <p></p>
+</div>
+
+</body>
+</html>
4 resources/easing-graph.html
View
@@ -7,6 +7,10 @@
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<style>
+ body {
+ font-size: 62.5%;
+ font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
+ }
.graph {
float: left;
margin-left: 10px;
Please sign in to comment.
Something went wrong with that request. Please try again.