Effects: Rewrite

1. Introduces a set of helper methods to easily create and define new effects.
2. Uses clip animations and placeholders instead of wrappers for clip effects.
3. Ensures all animations are detectable as animated

Fixes #10599
Fixes #9477
Fixes #9257
Fixes #9066
Fixes #8867
Fixes #8671
Fixes #8505
Fixes #7885
Fixes #7041

Closes gh-1017

7 files changed, 19 insertions, 13 deletions

diff --git a/demos/effect/addClass.html b/demos/effect/addClass.html
index f594291fe..0aab17304 100644
--- a/demos/effect/addClass.html
+++ b/demos/effect/addClass.html
@@ -10,8 +10,8 @@
 	<style>
 		.toggler { width: 500px; height: 200px; position: relative; }
 		#button { padding: .5em 1em; text-decoration: none; }
-		#effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
-		.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+		#effect { width: 240px;  padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
+		.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
 	</style>
 	<script>
 	$(function() {
diff --git a/demos/effect/animate.html b/demos/effect/animate.html
index 41f969982..7de535114 100644
--- a/demos/effect/animate.html
+++ b/demos/effect/animate.html
@@ -10,7 +10,7 @@
 	<style>
 		.toggler { width: 500px; height: 200px; position: relative; }
 		#button { padding: .5em 1em; text-decoration: none; }
-		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
+		#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 	</style>
 	<script>
diff --git a/demos/effect/default.html b/demos/effect/default.html
index aff19783f..f2a6b7686 100644
--- a/demos/effect/default.html
+++ b/demos/effect/default.html
@@ -25,7 +25,7 @@
 	<style>
 		.toggler { width: 500px; height: 200px; position: relative; }
 		#button { padding: .5em 1em; text-decoration: none; }
-		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+		#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
 		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 		.ui-effects-transfer { border: 2px dotted gray; }
 	</style>
@@ -40,7 +40,7 @@
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
-				options = { percent: 0 };
+				options = { percent: 50 };
 			} else if ( selectedEffect === "transfer" ) {
 				options = { to: "#button", className: "ui-effects-transfer" };
 			} else if ( selectedEffect === "size" ) {
diff --git a/demos/effect/hide.html b/demos/effect/hide.html
index 6c9948aab..301f93047 100644
--- a/demos/effect/hide.html
+++ b/demos/effect/hide.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/effect-clip.js"></script>
 	<script src="../../ui/effect-drop.js"></script>
 	<script src="../../ui/effect-explode.js"></script>
+	<script src="../../ui/effect-fade.js"></script>
 	<script src="../../ui/effect-fold.js"></script>
 	<script src="../../ui/effect-highlight.js"></script>
 	<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
 	<style>
 	.toggler { width: 500px; height: 200px; }
 	#button { padding: .5em 1em; text-decoration: none; }
-	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+	#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
 	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 	</style>
 	<script>
@@ -37,7 +38,7 @@
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
-				options = { percent: 0 };
+				options = { percent: 50 };
 			} else if ( selectedEffect === "size" ) {
 				options = { to: { width: 200, height: 60 } };
 			}
@@ -77,6 +78,7 @@
 	<option value="clip">Clip</option>
 	<option value="drop">Drop</option>
 	<option value="explode">Explode</option>
+	<option value="fade">Fade</option>
 	<option value="fold">Fold</option>
 	<option value="highlight">Highlight</option>
 	<option value="puff">Puff</option>
diff --git a/demos/effect/show.html b/demos/effect/show.html
index 445db04b9..5583ff36f 100644
--- a/demos/effect/show.html
+++ b/demos/effect/show.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/effect-clip.js"></script>
 	<script src="../../ui/effect-drop.js"></script>
 	<script src="../../ui/effect-explode.js"></script>
+	<script src="../../ui/effect-fade.js"></script>
 	<script src="../../ui/effect-fold.js"></script>
 	<script src="../../ui/effect-highlight.js"></script>
 	<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
 	<style>
 	.toggler { width: 500px; height: 200px; }
 	#button { padding: .5em 1em; text-decoration: none; }
-	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+	#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
 	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 	</style>
 	<script>
@@ -37,7 +38,7 @@
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
-				options = { percent: 100 };
+				options = { percent: 50 };
 			} else if ( selectedEffect === "size" ) {
 				options = { to: { width: 280, height: 185 } };
 			}
@@ -79,6 +80,7 @@
 	<option value="clip">Clip</option>
 	<option value="drop">Drop</option>
 	<option value="explode">Explode</option>
+	<option value="fade">Fade</option>
 	<option value="fold">Fold</option>
 	<option value="highlight">Highlight</option>
 	<option value="puff">Puff</option>
diff --git a/demos/effect/switchClass.html b/demos/effect/switchClass.html
index 34af4715b..0ac90fe93 100644
--- a/demos/effect/switchClass.html
+++ b/demos/effect/switchClass.html
@@ -11,8 +11,8 @@
 	.toggler { width: 500px; height: 200px; position: relative; }
 	#button { padding: .5em 1em; text-decoration: none; }
 	#effect { position: relative; }
-	.newClass { width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
-	.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	.newClass { width: 240px;  padding: 1em; letter-spacing: 0; margin: 0; }
+	.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
 	</style>
 	<script>
 	$(function() {
diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html
index 1a2cf0a1b..bac5758ab 100644
--- a/demos/effect/toggle.html
+++ b/demos/effect/toggle.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/effect-clip.js"></script>
 	<script src="../../ui/effect-drop.js"></script>
 	<script src="../../ui/effect-explode.js"></script>
+	<script src="../../ui/effect-fade.js"></script>
 	<script src="../../ui/effect-fold.js"></script>
 	<script src="../../ui/effect-highlight.js"></script>
 	<script src="../../ui/effect-puff.js"></script>
@@ -32,7 +33,7 @@
 	#effect {
 		position: relative;
 		width: 240px;
-		height: 135px;
+		height: 170px;
 		padding: 0.4em;
 	}
 	#effect h3 {
@@ -52,7 +53,7 @@
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
-				options = { percent: 0 };
+				options = { percent: 50 };
 			} else if ( selectedEffect === "size" ) {
 				options = { to: { width: 200, height: 60 } };
 			}
@@ -85,6 +86,7 @@
 	<option value="clip">Clip</option>
 	<option value="drop">Drop</option>
 	<option value="explode">Explode</option>
+	<option value="fade">Fade</option>
 	<option value="fold">Fold</option>
 	<option value="highlight">Highlight</option>
 	<option value="puff">Puff</option>