diff options
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> |