diff options
| author | Richard Worth <rdworth@gmail.com> | 2009-01-20 11:42:07 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2009-01-20 11:42:07 +0000 |
| commit | 9082cbe0957bbcba4097c8cd5fcb25b32254a66f (patch) | |
| tree | cc878afdbd8ad4810b4022773201fa04f9d99de8 /demos/effects_easings | |
| parent | aba53d09fd03790ef4d4c3d39197436851e4b7a2 (diff) | |
| download | jquery-ui-9082cbe0957bbcba4097c8cd5fcb25b32254a66f.tar.gz jquery-ui-9082cbe0957bbcba4097c8cd5fcb25b32254a66f.zip | |
set svn:eol-style to native
Diffstat (limited to 'demos/effects_easings')
| -rw-r--r-- | demos/effects_easings/default.html | 184 | ||||
| -rw-r--r-- | demos/effects_easings/index.html | 34 |
2 files changed, 109 insertions, 109 deletions
diff --git a/demos/effects_easings/default.html b/demos/effects_easings/default.html index 04ffeae24..0aeb1d42f 100644 --- a/demos/effects_easings/default.html +++ b/demos/effects_easings/default.html @@ -1,92 +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>
+<!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/index.html b/demos/effects_easings/index.html index a5bb099d9..dddbfc637 100644 --- a/demos/effects_easings/index.html +++ b/demos/effects_easings/index.html @@ -1,17 +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>
+<!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> |