aboutsummaryrefslogtreecommitdiffstats
path: root/demos/effect
diff options
context:
space:
mode:
authorMike Sherov <mike.sherov@gmail.com>2012-12-26 08:35:42 -0500
committerMike Sherov <mike.sherov@gmail.com>2014-12-10 16:58:38 -0500
commitb6bec797d6a8ef0b377a866c38c67e66a626b45f (patch)
tree2e38a21f1a3894ebe6c44283fd568243611cc403 /demos/effect
parent2a99bb7d37b7084b22b106040441a94f43785a05 (diff)
downloadjquery-ui-b6bec797d6a8ef0b377a866c38c67e66a626b45f.tar.gz
jquery-ui-b6bec797d6a8ef0b377a866c38c67e66a626b45f.zip
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
Diffstat (limited to 'demos/effect')
-rw-r--r--demos/effect/addClass.html4
-rw-r--r--demos/effect/animate.html2
-rw-r--r--demos/effect/default.html4
-rw-r--r--demos/effect/hide.html6
-rw-r--r--demos/effect/show.html6
-rw-r--r--demos/effect/switchClass.html4
-rw-r--r--demos/effect/toggle.html6
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>