diff options
| author | Scott Jehl <scott@scottjehl.com> | 2009-02-27 19:06:57 +0000 |
|---|---|---|
| committer | Scott Jehl <scott@scottjehl.com> | 2009-02-27 19:06:57 +0000 |
| commit | 78bddbe8df4d15844b72c213aedf983781439345 (patch) | |
| tree | e37e3eea1a511f224fbb21e0679333f338e08b1b /demos/toggleClass/default.html | |
| parent | 79a1d82582931de7321421b7bdf0e596f55bd8c4 (diff) | |
| download | jquery-ui-78bddbe8df4d15844b72c213aedf983781439345.tar.gz jquery-ui-78bddbe8df4d15844b72c213aedf983781439345.zip | |
updated classes more to use all animated properties
Diffstat (limited to 'demos/toggleClass/default.html')
| -rw-r--r-- | demos/toggleClass/default.html | 17 |
1 files changed, 6 insertions, 11 deletions
diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html index bdb5de497..7a3dbb24e 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -9,16 +9,14 @@ <style type="text/css"> .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } - #effect { position: relative; } - #effect h3 { margin: 0; padding: 0.4em; text-align: center; } - .ui-effects-transfer { border: 2px dotted gray; } - .first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border: 1px solid #000; background: #fff; color: #333; } - .second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border: 5px solid #4f5b8c; background: #ddebf4; color: #2c4359; } + #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } + #effect.newClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; } + </style> <script type="text/javascript"> $(function() { $("#button").click(function() { - $('#effect').toggleClass('second', 1000); + $('#effect').toggleClass('newClass', 1000); }); }); </script> @@ -28,11 +26,8 @@ <div class="demo"> <div class="toggler"> - <div id="effect" class="first ui-widget-content ui-corner-all"> - <h3 class="ui-widget-header ui-corner-all">Toggle Class</h3> - <p> - Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. - </p> + <div id="effect" class="newClass ui-corner-all"> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> |