Author: scottjehl
Date: Fri Feb 27 11:06:57 2009
New Revision: 2149
Modified:
trunk/demos/addClass/default.html
trunk/demos/removeClass/default.html
trunk/demos/switchClass/default.html
trunk/demos/toggleClass/default.html
Log:
updated classes more to use all animated properties
Modified: trunk/demos/addClass/default.html
==============================================================================
--- trunk/demos/addClass/default.html (original)
+++ trunk/demos/addClass/default.html Fri Feb 27 11:06:57 2009
@@ -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>
-
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
-
+ <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">
-Click the button above to preview the effect.
+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.
</div><!-- End demo-description -->
Modified: trunk/demos/removeClass/default.html
==============================================================================
--- trunk/demos/removeClass/default.html (original)
+++ trunk/demos/removeClass/default.html Fri Feb 27 11:06:57 2009
@@ -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;
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').removeClass('second', 1000, callback);
+ $('#effect').removeClass('newClass', 1000, callback);
});
function callback(){
setTimeout(function(){
- $('#effect').addClass('second');
- }, 1000);
+ $('#effect').addClass('newClass');
+ }, 1500);
}
});
</script>
@@ -34,11 +31,8 @@
<div class="demo">
<div class="toggler">
- <div id="effect" class="first second ui-widget-content ui-corner-all">
- <h3 class="ui-widget-header ui-corner-all">Remove Class</h3>
-
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
-
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>
Modified: trunk/demos/switchClass/default.html
==============================================================================
--- trunk/demos/switchClass/default.html (original)
+++ trunk/demos/switchClass/default.html Fri Feb 27 11:06:57 2009
@@ -9,17 +9,16 @@
<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; }
+ #effect.newClass { width: 240px; padding: 1em; letter-spacing: 0;
font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+ #effect.anotherNewClass { 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(){
- $(".first").switchClass('first', 'second', 1000);
- $(".second").switchClass('second', 'first', 1000);
+ $(".newClass").switchClass('newClass', 'anotherNewClass', 1000);
+ $(".anotherNewClass").switchClass('anotherNewClass', 'newClass', 1000);
});
});
</script>
@@ -28,15 +27,12 @@
<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">Switch Class</h3>
-
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
-
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>
-
<a href="#" id="button" class="ui-state-default ui-corner-all">Run
Effect</a>
</div><!-- End demo -->
Modified: trunk/demos/toggleClass/default.html
==============================================================================
--- trunk/demos/toggleClass/default.html (original)
+++ trunk/demos/toggleClass/default.html Fri Feb 27 11:06:57 2009
@@ -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>
-
- Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
-
+ <div id="effect" class="newClass ui-corner-all">
+ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>