diff options
| author | Keith Wood <kbwood.au@gmail.com> | 2009-01-18 05:09:33 +0000 |
|---|---|---|
| committer | Keith Wood <kbwood.au@gmail.com> | 2009-01-18 05:09:33 +0000 |
| commit | 6b887b5efd931fbc2e13056da904a5f22870bc1d (patch) | |
| tree | cfdc989a0c1cd0ca0ea5de780eb8157cd86b1b01 /demos | |
| parent | 3e4ed582b7a2f9d0d487558e7342dd30fc2a8ab2 (diff) | |
| download | jquery-ui-6b887b5efd931fbc2e13056da904a5f22870bc1d.tar.gz jquery-ui-6b887b5efd931fbc2e13056da904a5f22870bc1d.zip | |
AAdded Easings demonstration
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/effects_easings/default.html | 92 | ||||
| -rw-r--r-- | demos/effects_easings/images/target.png | bin | 0 -> 541 bytes | |||
| -rw-r--r-- | demos/effects_easings/index.html | 17 | ||||
| -rw-r--r-- | demos/index.html | 5 |
4 files changed, 113 insertions, 1 deletions
diff --git a/demos/effects_easings/default.html b/demos/effects_easings/default.html new file mode 100644 index 000000000..04ffeae24 --- /dev/null +++ b/demos/effects_easings/default.html @@ -0,0 +1,92 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Effects - Easings Demo</title>
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.js"></script>
+ <script type="text/javascript" src="../../ui/effects.core.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ </style>
+ <script type="text/javascript">
+ function moveToHere(event, easing) {
+ var area = $("#area");
+ var target = $("#target");
+ var offset = area.offset();
+ var max = [area.width() - target.width(), area.height() - target.height()];
+ var scroll = [document.documentElement.scrollLeft || document.body.scrollLeft,
+ document.documentElement.scrollTop || document.body.scrollTop];
+ target.animate({left: Math.max(0, Math.min((event.clientX + scroll[0]) -
+ offset.left - (target.width() / 2), max[0])),
+ top: Math.max(0, Math.min((event.clientY + scroll[1]) -
+ offset.top - (target.height() / 2), max[1]))},
+ 2000, easing);
+ }
+
+ $(function() {
+ $("#area").click(function(event) {
+ moveToHere(event, $("#easing").val());
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p><select id="easing">
+ <option value="linear">Linear easing</option>
+ <option value="swing">Swing easing</option>
+ <option value="easeInQuad">Quadratic ease in</option>
+ <option value="easeOutQuad">Quadratic ease out</option>
+ <option value="easeInOutQuad">Quadratic ease in out</option>
+ <option value="easeInCubic">Cubic ease in</option>
+ <option value="easeOutCubic">Cubic ease out</option>
+ <option value="easeInOutCubic">Cubic ease in out</option>
+ <option value="easeInQuart">Quartic ease in</option>
+ <option value="easeOutQuart">Quartic ease out</option>
+ <option value="easeInOutQuart">Quartic ease in out</option>
+ <option value="easeInQuint">Quintic ease in</option>
+ <option value="easeOutQuint">Quintic ease out</option>
+ <option value="easeInOutQuint">Quintic ease in out</option>
+ <option value="easeInSine">Sinusoidal ease in</option>
+ <option value="easeOutSine">Sinusoidal ease out</option>
+ <option value="easeInOutSine">Sinusoidal ease in out</option>
+ <option value="easeInExpo">Exponential ease in</option>
+ <option value="easeOutExpo">Exponential ease out</option>
+ <option value="easeInOutExpo">Exponential ease in out</option>
+ <option value="easeInCirc">Circular ease in</option>
+ <option value="easeOutCirc">Circular ease out</option>
+ <option value="easeInOutCirc">Circular ease in out</option>
+ <option value="easeInElastic">Elastic ease in (decaying sine wave)</option>
+ <option value="easeOutElastic">Elastic ease out</option>
+ <option value="easeInOutElastic">Elastic ease in out</option>
+ <option value="easeInBack">Back ease in (overshooting cubic)</option>
+ <option value="easeOutBack">Back ease out</option>
+ <option value="easeInOutBack">Back ease in out</option>
+ <option value="easeInBounce">Bounce ease in (decaying parabolic)</option>
+ <option value="easeOutBounce">Bounce ease out</option>
+ <option value="easeInOutBounce">Bounce ease in out</option>
+</select>
+</p>
+<div id="area" style="position: relative; width: 400px; height: 300px; border: 1px solid #bbb;">
+ <img id="target" src="images/target.png" style="position: absolute; left: 0px;"/>
+</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/>
+An <b>ease-in</b> starts slow and then speeds up.<br/>
+An <b>ease-out</b> starts fast and then slows to a stop.<br/>
+An <b>ease-in-out</b> combines the two so that the first half is an ease-in and the second half is an ease-out.
+</p>
+<p>
+Click above to preview the selected easing.
+</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/effects_easings/images/target.png b/demos/effects_easings/images/target.png Binary files differnew file mode 100644 index 000000000..d5b6510b7 --- /dev/null +++ b/demos/effects_easings/images/target.png diff --git a/demos/effects_easings/index.html b/demos/effects_easings/index.html new file mode 100644 index 000000000..a5bb099d9 --- /dev/null +++ b/demos/effects_easings/index.html @@ -0,0 +1,17 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Effects - Easing Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Easing Effects</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Easings</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
diff --git a/demos/index.html b/demos/index.html index 64cb6a1a6..4cc0f6dc7 100644 --- a/demos/index.html +++ b/demos/index.html @@ -39,6 +39,7 @@ <script type="text/javascript" src="../ui/i18n/ui.datepicker-cs.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-da.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-de.js"></script> + <script type="text/javascript" src="../ui/i18n/ui.datepicker-el.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-eo.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-es.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-fa.js"></script> @@ -55,6 +56,7 @@ <script type="text/javascript" src="../ui/i18n/ui.datepicker-ko.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-lt.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-lv.js"></script> + <script type="text/javascript" src="../ui/i18n/ui.datepicker-ms.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-nl.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-no.js"></script> <script type="text/javascript" src="../ui/i18n/ui.datepicker-pl.js"></script> @@ -92,7 +94,7 @@ function loadPage(path) { var section = path.replace(/\/[^\/]+\.html/,''); - var header = section.replace(/.+\/([^\/]+)/,'$1'); + var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' '); $('td.normal div.normal') .empty() @@ -231,6 +233,7 @@ <dd><a href="effects_movement/index.html">Movement</a></dd> <dd><a href="effects_feedback/index.html">Feedback</a></dd> <dd><a href="effects_showhide/index.html">Show/Hide</a></dd> + <dd><a href="effects_easings/index.html">Easings</a></dd> </dl> </td> <td class="normal"> |
