From 6caec6b12bd43b71fff44196f7690f4cccd968bf Mon Sep 17 00:00:00 2001
From: Keith Wood <kbwood.au@gmail.com>
Date: Wed, 12 Nov 2008 13:36:46 +0000
Subject: [PATCH] Added alternate easing demonstration

---
 demos/functional/templates/images/target.jpeg | Bin 0 -> 1074 bytes
 demos/functional/templates/images/white.gif   | Bin 0 -> 832 bytes
 .../templates/ui.effects.easing.ex2.html      |  19 ++++
 .../templates/ui.effects.easing.html          | 106 ++++++++++++------
 4 files changed, 93 insertions(+), 32 deletions(-)
 create mode 100644 demos/functional/templates/images/target.jpeg
 create mode 100644 demos/functional/templates/images/white.gif
 create mode 100644 demos/functional/templates/ui.effects.easing.ex2.html

diff --git a/demos/functional/templates/images/target.jpeg b/demos/functional/templates/images/target.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..a433b1e30dc255eac1809459f3d0cdff7f7feeb2
GIT binary patch
literal 1074
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Rjh%y?jgy0&gNuukn^%mVmxqT}T0~Sp
zOhHyjNkLX#UPZ%1M@7w0U0z<-R@czf+{(&IS=-*l-on|$(#jlU2qPC47cUR56hFU|
zxvIRXImzJv0R}-11_K5IW=16jCP7AKLB{__7$g}Om>EH?g##8gc2*{4pp=mS10ypt
zBP%;IGb==vk%^gwfmKkEO-R@<P|3*ADY39oWZ^;fi5ta|7G3-R)FZ(NG7fGQkipEt
z%E$ziQ4?ffVq#)sW@3lQ0!<TSU{Pc>3>4ZZtmK$j_~GOKTMRtRj6l}`W$YQYTRg}~
z`E1jgeDA&B+Crb%EiD^PSjdJ{F_^0L-+Q#{(aAT99cOjNt6Oh1zn)^TwN~0oGf|FF
z@_FC#nd`o8J$L!)g)_5KuJ!ExYuNh!%Ith$-h<P&eZFVC;NQ(<(tKAB?^Kyx)4Xru
z)Z-P24%Kz8O6G!7luLOP__IESR7^;Bn>3ZhD#R(;eYW#Mm-*p7Yy$hwE#6>$n|0;(
z&Bp3STbnEwcs!n;v;6d}fFo^k7J^<)a_p!0Rnss0XRw>PUg|Ad@WB=5+eO?Q86NaI
zpZJrud~LziylGFas#p4~P}EW`-Q?Et)$;h?wH9xB*Y4Q%?U_}`o0A&cg-1VMKTsk!
zrG@YO$y2inj*2qgx0?58_RZ|oCv3O4RXY4?k(v~FL0H~jcx}YOZ8HVa97-mLO;wCL
zl5nL+DyCKUhmhOrGiw$)d}S96Ut)U9;r)bPmxQ?kb}f!`ZSD=@$n`LiEnW06)6&`b
zOzD4y_$sCAo3kGOtywVD=2sCDr{WTMCI5z3mGfnoT-nnqZ=BEH;&JbJ<E#YnkXx7D
z%&at=Hfi&6)e^a1A-WQ3O=)3K_WOQTm#67=9GSRxF`wn{icf}F2XA)PcWo8@Yt-o(
zwj^Us?d4DnZ$9V5gyhOCb8131r~R0Jd3$&FfoDlqrexkz-(-K%r6$yii@V^4<Fjd(
z?5;XFu)L35Q(fF?s4Di^F7J!vizySlvoFTaioAVxLeU4;N5^-izUxztJTAfKBG1Yf
z_4&uum(M2r_R78TR7<MsSdjXyDNBu7J^RmdzUMFeDZiD^ytdLd^MvKHB~iAYY-Ybb
zcJ4V-O6ay%HS4zpEsQdF^p@|2)s4cf?hTXo!~}T-ew_F5pVq9kOM08c#WEs3Ei*c|
z@5jO`Pw#!GC{$i|SK|BpdYK^mtv2mD&u_K)>o_+ve7^e6ZugZUZU@#MOTL*rb5qjI
z8`)*5dlU0ll*(R_k9k$6`LAhfwDPS*YBnhkii7%=x*wT*t#_$Nn8fV!|8D{SsxPY=

literal 0
HcmV?d00001

diff --git a/demos/functional/templates/images/white.gif b/demos/functional/templates/images/white.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b4b40eddaecf4033b846b59fcb49a38e8107f4d5
GIT binary patch
literal 832
zcmb`GF;1It48>oh4q=PbwH*)}>gEO1ora!)g~jJc#lRUXF|?c@+#pqj#Nhi>o!sC1
zp8-qJ7svMVd(U6K-QHYX-|w{3UpWrzb6Af9*}-u-ord2>vmQM8M)2GFMMx=?)ZRoE
zp-4q3S}`tWC{tO=R*risRH-UetHz@p>QtAy)n=**O=?Qh&^EB4!D5*1@g7G;R76LN
z*OFyMR%AzxSx~Hus;G_{lcKjXx}rOJ;K*o9##Btluoc#TK^m6OqQ+vdfd-4=u^{I}
zWp?IRA8W~~vN~%l7Zwz|vO9ZF4=H+cDyMUhhab>n8avPr2^7K_Fi69aR(P-&Y@op!
zJLfVv(N$w3(Z^b{?&`r;<idhtP1oQfPGbPPXvb*OVkLe+lWFXL6M|6)Yrr7QB(&hc
zVz7Z8pUB;m$%)}&7>PdClJ$DY?CZL>i|d58d0oZ5%V@j4yz}U?!$(*OjkHMnCX0uG
z7c{Q}SHe6rvFiNahmH6veDPcD|Ae-mHD{mp$Dh9+wjVF=-j2WiJnk;OKkZ+hUw>>i
G`uZPs%4eDY

literal 0
HcmV?d00001

diff --git a/demos/functional/templates/ui.effects.easing.ex2.html b/demos/functional/templates/ui.effects.easing.ex2.html
new file mode 100644
index 000000000..9e7f1d66b
--- /dev/null
+++ b/demos/functional/templates/ui.effects.easing.ex2.html
@@ -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
diff --git a/demos/functional/templates/ui.effects.easing.html b/demos/functional/templates/ui.effects.easing.html
index 61573ff97..6927ec73b 100644
--- a/demos/functional/templates/ui.effects.easing.html
+++ b/demos/functional/templates/ui.effects.easing.html
@@ -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"); });' },
 				]
 			}