updated classes more to use all animated properties

diff --git a/demos/addClass/default.html b/demos/addClass/default.html
index 429c5fef51906f464b75a0dd5479ff547cf24672..6341e813250d55a31025e3053192f14e0e9b0a9e 100644 (file)
--- 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 -->
 

diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html
index 99eb22cf8af4d09425f781764ba532aa0765e956..56bf099362f03aa9aec9c0bb3309d6d8e49e1ba0 100644 (file)
--- a/demos/removeClass/default.html
+++ b/demos/removeClass/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;  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>
-               <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>
 

diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html
index e5491b6d2fd5e89321ec82c14f44c0309cb031a3..fd4780d964309eb5cd803d42b5b7ca18d7746944 100644 (file)
--- a/demos/switchClass/default.html
+++ b/demos/switchClass/default.html
@@ -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>
-               <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>
-
 <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
 
 </div><!-- End demo -->

diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html
index bdb5de497cee2391b66e2a4a251735774e3f17e8..7a3dbb24e544ac2fd53d372d613dbc6b1641cfcb 100644 (file)
--- 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>