diff options
author | Mike Sherov <mike.sherov@gmail.com> | 2012-12-26 08:35:42 -0500 |
---|---|---|
committer | Mike Sherov <mike.sherov@gmail.com> | 2014-12-10 16:58:38 -0500 |
commit | b6bec797d6a8ef0b377a866c38c67e66a626b45f (patch) | |
tree | 2e38a21f1a3894ebe6c44283fd568243611cc403 /demos/effect | |
parent | 2a99bb7d37b7084b22b106040441a94f43785a05 (diff) | |
download | jquery-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.html | 4 | ||||
-rw-r--r-- | demos/effect/animate.html | 2 | ||||
-rw-r--r-- | demos/effect/default.html | 4 | ||||
-rw-r--r-- | demos/effect/hide.html | 6 | ||||
-rw-r--r-- | demos/effect/show.html | 6 | ||||
-rw-r--r-- | demos/effect/switchClass.html | 4 | ||||
-rw-r--r-- | demos/effect/toggle.html | 6 |
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> |