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/addClass | |
| 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/addClass')
| -rw-r--r-- | demos/addClass/default.html | 22 |
1 files changed, 8 insertions, 14 deletions
diff --git a/demos/addClass/default.html b/demos/addClass/default.html index 429c5fef5..6341e8132 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -9,22 +9,19 @@ <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; 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').addClass('second', 1000, callback); + $('#effect').addClass('newClass', 1000, callback); }); function callback(){ setTimeout(function(){ - $('#effect').removeClass('second'); - }, 1000); + $('#effect').removeClass('newClass'); + }, 1500); } }); </script> @@ -34,11 +31,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">Add 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=" ui-corner-all"> + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> @@ -48,7 +42,7 @@ <div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<p>This demo adds a class which animates: line-height, text-indent, opacity, letter-spacing, width, height, padding, margin, font-size, border color, border-width, background color, and font color. </p> </div><!-- End demo-description --> |