r923 - in trunk/demos/functional/templates: . images
Author: kbwood.au
Date: Wed Nov 12 05:36:46 2008
New Revision: 923
Added:
trunk/demos/functional/templates/images/target.jpeg (contents, props
changed)
trunk/demos/functional/templates/images/white.gif (contents, props
changed)
trunk/demos/functional/templates/ui.effects.easing.ex2.html
Modified:
trunk/demos/functional/templates/ui.effects.easing.html
Log:
Added alternate easing demonstration
Added: trunk/demos/functional/templates/images/target.jpeg
==============================================================================
Binary file. No diff available.
Added: trunk/demos/functional/templates/images/white.gif
==============================================================================
Binary file. No diff available.
Added: trunk/demos/functional/templates/ui.effects.easing.ex2.html
==============================================================================
--- (empty file)
+++ trunk/demos/functional/templates/ui.effects.easing.ex2.html Wed Nov 12
05:36:46 2008
@@ -0,0 +1,19 @@
+<div id="area" style="position: relative; width: 400px; height: 300px;
border: 1px solid #bbb;">
+ <img src="templates/images/white.gif" style="width: 400px; height:
300px;"/>
+ <img id="target" src="templates/images/target.jpeg" style="position:
absolute; left: 0px; top: 0px;"/>
+</div>
+<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);
+}
+</script>
\ No newline at end of file
Modified: trunk/demos/functional/templates/ui.effects.easing.html
==============================================================================
--- trunk/demos/functional/templates/ui.effects.easing.html (original)
+++ trunk/demos/functional/templates/ui.effects.easing.html Wed Nov 12
05:36:46 2008
@@ -19,38 +19,80 @@
destroy: '$("#doBounce").unbind();',
options: [
- { desc: 'Linear easing', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "linear", times: 1}, 800); });' },
- { desc: 'Swing easing', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "swing", times: 1}, 800); });' },
- { desc: 'Quadratic ease in', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 800);
});' },
- { desc: 'Quadratic ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutQuad", times: 1}, 800); });' },
- { desc: 'Quadratic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuad", times: 1}, 800); });' },
- { desc: 'Cubic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 800); });'
},
- { desc: 'Cubic ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 800);
});' },
- { desc: 'Cubic ease in out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 800);
});' },
- { desc: 'Quartic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 800); });'
},
- { desc: 'Quartic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 800);
});' },
- { desc: 'Quartic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuart", times: 1}, 800); });' },
- { desc: 'Quintic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 800); });'
},
- { desc: 'Quintic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 800);
});' },
- { desc: 'Quintic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuint", times: 1}, 800); });' },
- { desc: 'Sinusoidal ease in',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInSine", times: 1}, 800); });' },
- { desc: 'Sinusoidal ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutSine", times: 1}, 800); });' },
- { desc: 'Sinusoidal ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutSine", times: 1}, 800); });' },
- { desc: 'Exponential ease in',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInExpo", times: 1}, 800); });' },
- { desc: 'Exponential ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutExpo", times: 1}, 800); });' },
- { desc: 'Exponential ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutExpo", times: 1}, 800); });' },
- { desc: 'Circular ease in', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 800);
});' },
- { desc: 'Circular ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 800);
});' },
- { desc: 'Circular ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutCirc", times: 1}, 800); });' },
- { desc: 'Elastic ease in (decaying sine wave)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInElastic", times: 1}, 800); });' },
- { desc: 'Elastic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 800);
});' },
- { desc: 'Elastic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutElastic", times: 1}, 800); });' },
- { desc: 'Back ease in (overshooting cubic)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInBack", times: 1}, 800); });' },
- { desc: 'Back ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 800); });'
},
- { desc: 'Back ease in out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 800);
});' },
- { desc: 'Bounce ease in (decaying parabolic)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInBounce", times: 1}, 800); });' },
- { desc: 'Bounce ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 800);
});' },
- { desc: 'Bounce ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutBounce", times: 1}, 800); });' },
+ { desc: 'Linear easing', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "linear", times: 1}, 2000); });' },
+ { desc: 'Swing easing', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "swing", times: 1}, 2000); });' },
+ { desc: 'Quadratic ease in', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 2000);
});' },
+ { desc: 'Quadratic ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutQuad", times: 1}, 2000); });' },
+ { desc: 'Quadratic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuad", times: 1}, 2000); });' },
+ { desc: 'Cubic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 2000);
});' },
+ { desc: 'Cubic ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 2000);
});' },
+ { desc: 'Cubic ease in out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1},
2000); });' },
+ { desc: 'Quartic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 2000);
});' },
+ { desc: 'Quartic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 2000);
});' },
+ { desc: 'Quartic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuart", times: 1}, 2000); });' },
+ { desc: 'Quintic ease in', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 2000);
});' },
+ { desc: 'Quintic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 2000);
});' },
+ { desc: 'Quintic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutQuint", times: 1}, 2000); });' },
+ { desc: 'Sinusoidal ease in',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInSine", times: 1}, 2000); });' },
+ { desc: 'Sinusoidal ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutSine", times: 1}, 2000); });' },
+ { desc: 'Sinusoidal ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutSine", times: 1}, 2000); });' },
+ { desc: 'Exponential ease in',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInExpo", times: 1}, 2000); });' },
+ { desc: 'Exponential ease out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeOutExpo", times: 1}, 2000); });' },
+ { desc: 'Exponential ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutExpo", times: 1}, 2000); });' },
+ { desc: 'Circular ease in', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 2000);
});' },
+ { desc: 'Circular ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 2000);
});' },
+ { desc: 'Circular ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutCirc", times: 1}, 2000); });' },
+ { desc: 'Elastic ease in (decaying sine wave)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInElastic", times: 1}, 2000); });' },
+ { desc: 'Elastic ease out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1},
2000); });' },
+ { desc: 'Elastic ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutElastic", times: 1}, 2000); });' },
+ { desc: 'Back ease in (overshooting cubic)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInBack", times: 1}, 2000); });' },
+ { desc: 'Back ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 2000);
});' },
+ { desc: 'Back ease in out', source: '$("#doBounce").click(function()
{ $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 2000);
});' },
+ { desc: 'Bounce ease in (decaying parabolic)',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInBounce", times: 1}, 2000); });' },
+ { desc: 'Bounce ease out', source: '$("#doBounce").click(function() {
$("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 2000);
});' },
+ { desc: 'Bounce ease in out',
source: '$("#doBounce").click(function() { $("#bounce").effect("bounce",
{easing: "easeInOutBounce", times: 1}, 2000); });' },
+ ]
+ },
+
+ {
+ title: 'Easings 2',
+ desc: 'Click within the bounded area to move the icon with the
selected easing.',
+ html: { url: 'templates/ui.effects.easing.ex2.html' },
+ destroy: '$("#area").unbind();',
+
+ options: [
+ { desc: 'Linear easing', source: '$("#area").click(function(event) {
moveToHere(event, "linear"); });' },
+ { desc: 'Swing easing', source: '$("#area").click(function(event) {
moveToHere(event, "swing"); });' },
+ { desc: 'Quadratic ease in',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInQuad"); });' },
+ { desc: 'Quadratic ease out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeOutQuad"); });' },
+ { desc: 'Quadratic ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutQuad"); });' },
+ { desc: 'Cubic ease in', source: '$("#area").click(function(event) {
moveToHere(event, "easeInCubic"); });' },
+ { desc: 'Cubic ease out', source: '$("#area").click(function(event) {
moveToHere(event, "easeOutCubic"); });' },
+ { desc: 'Cubic ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutCubic"); });' },
+ { desc: 'Quartic ease in', source: '$("#area").click(function(event)
{ moveToHere(event, "easeInQuart"); });' },
+ { desc: 'Quartic ease out', source: '$("#area").click(function(event)
{ moveToHere(event, "easeOutQuart"); });' },
+ { desc: 'Quartic ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutQuart"); });' },
+ { desc: 'Quintic ease in', source: '$("#area").click(function(event)
{ moveToHere(event, "easeInQuint"); });' },
+ { desc: 'Quintic ease out', source: '$("#area").click(function(event)
{ moveToHere(event, "easeOutQuint"); });' },
+ { desc: 'Quintic ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutQuint"); });' },
+ { desc: 'Sinusoidal ease in',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInSine"); });' },
+ { desc: 'Sinusoidal ease out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeOutSine"); });' },
+ { desc: 'Sinusoidal ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutSine"); });' },
+ { desc: 'Exponential ease in',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInExpo"); });' },
+ { desc: 'Exponential ease out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeOutExpo"); });' },
+ { desc: 'Exponential ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutExpo"); });' },
+ { desc: 'Circular ease in', source: '$("#area").click(function(event)
{ moveToHere(event, "easeInCirc"); });' },
+ { desc: 'Circular ease out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeOutCirc"); });' },
+ { desc: 'Circular ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutCirc"); });' },
+ { desc: 'Elastic ease in (decaying sine wave)',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInElastic"); });' },
+ { desc: 'Elastic ease out', source: '$("#area").click(function(event)
{ moveToHere(event, "easeOutElastic"); });' },
+ { desc: 'Elastic ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutElastic"); });' },
+ { desc: 'Back ease in (overshooting cubic)',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInBack"); });' },
+ { desc: 'Back ease out', source: '$("#area").click(function(event) {
moveToHere(event, "easeOutBack"); });' },
+ { desc: 'Back ease in out', source: '$("#area").click(function(event)
{ moveToHere(event, "easeInOutBack"); });' },
+ { desc: 'Bounce ease in (decaying parabolic)',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInBounce"); });' },
+ { desc: 'Bounce ease out', source: '$("#area").click(function(event)
{ moveToHere(event, "easeOutBounce"); });' },
+ { desc: 'Bounce ease in out',
source: '$("#area").click(function(event) {
moveToHere(event, "easeInOutBounce"); });' },
]
}