update javadocs

4 files changed, 432 insertions, 209 deletions

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
index 587edbf6..c0c337ac 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
@@ -414,7 +414,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   private static JsNodeArray copyNodeList(NodeList<? extends Node> n) {

     JsNodeArray res = JsNodeArray.create();

     for (int i = 0; i < n.getLength(); i++) {

-      res.addNode(n.getItem(i));

+      res.addNode(n.getItem(i), i);

     }

     return res;

   }

@@ -572,11 +572,11 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 

   /**

    * The animate() method allows you to create animation effects on any numeric

-   * CSS property. All animated properties should be numeric, non-numeric cannot

-   * be animated using basic functionality. (For example, width, height, or left

-   * can be animated but background-color cannot be.) Property values are

-   * treated as a number of pixels unless otherwise specified. The units em and

-   * % can be specified where applicable.

+   * CSS property or any color CSS property.

+   * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

    * 

    * Example:

    * 

@@ -601,6 +601,15 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);

    * </pre>

    * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);

+   * </pre>

+   * 

    * @param p a {@link Properties} object containing css properties to animate.

    * @param funcs an array of {@link Function} called once the animation is

    *          complete

@@ -613,12 +622,13 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   }

 

   /**

+   * 

    * The animate() method allows you to create animation effects on any numeric

-   * CSS property. All animated properties should be numeric, non-numeric cannot

-   * be animated using basic functionality. (For example, width, height, or left

-   * can be animated but background-color cannot be.) Property values are

-   * treated as a number of pixels unless otherwise specified. The units em and

-   * % can be specified where applicable.

+   * CSS property or any color CSS property.

+   * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

    * 

    * Example:

    * 

@@ -650,10 +660,18 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    * 

    * The duration of the animation is 500ms.

    * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");

+   * </pre>

+   * 

    * @param prop the property to animate : "cssName:'value'"

    * @param funcs an array of {@link Function} called once the animation is

    *          complete

-   * @param duration the duration in milliseconds of the animation

    */

   public GQuery animate(String prop, Function... funcs) {

     return as(Effects).animate(prop, funcs);

@@ -661,12 +679,11 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 

   /**

    * The animate() method allows you to create animation effects on any numeric

-   * CSS property. All animated properties should be numeric, non-numeric cannot

-   * be animated using basic functionality. (For example, width, height, or left

-   * can be animated but background-color cannot be.) Property values are

-   * treated as a number of pixels unless otherwise specified. The units em and

-   * % can be specified where applicable.

+   * CSS property or any color CSS property.

    * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

    * 

    * Example:

    * 

@@ -697,6 +714,16 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    * </pre>

    * 

    * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");

+   * </pre>

+   * 

+   * 

    * @param prop the property to animate : "cssName:'value'"

    * @param funcs an array of {@link Function} called once the animation is

    *          complete

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
index 2553bb4f..ac18ffb0 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
@@ -107,11 +107,11 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property. All animated properties should be numeric, non-numeric cannot
-   * be animated using basic functionality. (For example, width, height, or left
-   * can be animated but background-color cannot be.) Property values are
-   * treated as a number of pixels unless otherwise specified. The units em and
-   * % can be specified where applicable.
+   * CSS property or any color CSS property.
+   * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
    * 
    * Example:
    * 
@@ -136,6 +136,15 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
    * </pre>
    * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   * </pre>
+   * 
    * @param p a {@link Properties} object containing css properties to animate.
    * @param funcs an array of {@link Function} called once the animation is
    *          complete
@@ -145,12 +154,13 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> animate(Properties p, int duration, Easing easing, Function... funcs);
 
   /**
+   * 
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property. All animated properties should be numeric, non-numeric cannot
-   * be animated using basic functionality. (For example, width, height, or left
-   * can be animated but background-color cannot be.) Property values are
-   * treated as a number of pixels unless otherwise specified. The units em and
-   * % can be specified where applicable.
+   * CSS property or any color CSS property.
+   * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
    * 
    * Example:
    * 
@@ -182,21 +192,28 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * 
    * The duration of the animation is 500ms.
    * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   * </pre>
+   * 
    * @param prop the property to animate : "cssName:'value'"
    * @param funcs an array of {@link Function} called once the animation is
    *          complete
-   * @param duration the duration in milliseconds of the animation
    */
   LazyGQuery<T> animate(String prop, Function... funcs);
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property. All animated properties should be numeric, non-numeric cannot
-   * be animated using basic functionality. (For example, width, height, or left
-   * can be animated but background-color cannot be.) Property values are
-   * treated as a number of pixels unless otherwise specified. The units em and
-   * % can be specified where applicable.
+   * CSS property or any color CSS property.
    * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
    * 
    * Example:
    * 
@@ -227,6 +244,16 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    * </pre>
    * 
    * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   * </pre>
+   * 
+   * 
    * @param prop the property to animate : "cssName:'value'"
    * @param funcs an array of {@link Function} called once the animation is
    *          complete
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
index ec903aa4..e45c1e95 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
@@ -27,10 +27,10 @@ import com.google.gwt.query.client.plugins.effects.ClipAnimation.Direction;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;

 

 /**

- *  Effects plugin for Gwt Query. 

+ * Effects plugin for Gwt Query.

  */

-public class Effects extends QueuePlugin<Effects>  {

-  

+public class Effects extends QueuePlugin<Effects> {

+

   /**

    * Just a class to store predefined speed constant values.

    */

@@ -57,21 +57,45 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * The animate() method allows us to create animation effects on any numeric CSS property. 

-   * The only required parameter is a map of CSS properties. 

-   * This map is similar to the one that can be sent to the .css() method, 

-   * except that the range of properties is more restrictive.

-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 

-   * (For example, width, height, or left can be animated but background-color cannot be.) 

-   * Property values are treated as a number of pixels unless otherwise specified.

-   *  The units em and % can be specified where applicable.

-   *  

-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 

-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 

-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 

-   *  from the current value of the property.

-   */  

+   * The animate() method allows you to create animation effects on any numeric

+   * CSS property or any color CSS property.

+   * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to the position top:500px and left:500px for 400ms.

+   *  //use a swing easing function for the transition

+   *  $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);

+   * </pre>

+   * 

+   * In addition to numeric values, each property can take the strings 'show',

+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing

+   * animations that take into account the display type of the element. Animated

+   * properties can also be relative. If a value is supplied with a leading +=

+   * or -= sequence of characters, then the target value is computed by adding

+   * or subtracting the given number from the current value of the property.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.

+   *  //use a swing easing function for the transition

+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);

+   * </pre>

+   * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);

+   * </pre>

+   */

   public Effects animate(final Properties p, final int duration,

       final Easing easing, final Function... funcs) {

     queue(new Function() {

@@ -92,50 +116,112 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * The animate() method allows us to create animation effects on any numeric CSS property. 

-   * The only required parameter is a map of CSS properties. 

-   * This map is similar to the one that can be sent to the .css() method, 

-   * except that the range of properties is more restrictive.

-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 

-   * (For example, width, height, or left can be animated but background-color cannot be.) 

-   * Property values are treated as a number of pixels unless otherwise specified.

-   *  The units em and % can be specified where applicable.

-   *  

-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 

-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 

-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 

-   *  from the current value of the property.

+   * The animate() method allows you to create animation effects on any numeric

+   * CSS property or any color CSS property.

+   * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to left:500px for 500ms

+   *  $("#foo").animate("left:'500'");

+   * </pre>

+   * 

+   * In addition to numeric values, each property can take the strings 'show',

+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing

+   * animations that take into account the display type of the element. Animated

+   * properties can also be relative. If a value is supplied with a leading +=

+   * or -= sequence of characters, then the target value is computed by adding

+   * or subtracting the given number from the current value of the property.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to 500px to the left for 500ms and

+   *  // change the background color of the element at the end of the animation

+   *  $("#foo").animate("left:'+=500'", new Function(){

+   *                  

+   *                 public void f(Element e){

+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);

+   *                 }

+   *                 

+   *              });

+   * </pre>

+   * 

+   * The duration of the animation is 500ms.

+   * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");

+   * </pre>

    */

   public Effects animate(String prop, Function... funcs) {

     return animate(prop, 500, funcs);

   }

 

   /**

-   * The animate() method allows us to create animation effects on any numeric CSS property. 

-   * The only required parameter is a map of CSS properties. 

-   * This map is similar to the one that can be sent to the .css() method, 

-   * except that the range of properties is more restrictive.

-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 

-   * (For example, width, height, or left can be animated but background-color cannot be.) 

-   * Property values are treated as a number of pixels unless otherwise specified.

-   *  The units em and % can be specified where applicable.

-   *  

-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 

-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 

-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 

-   *  from the current value of the property.

-   */  

+   * The animate() method allows you to create animation effects on any numeric

+   * CSS property or any color CSS property.

+   * 

+   * Concerning numeric property, values are treated as a number of pixels

+   * unless otherwise specified. The units em and % can be specified where

+   * applicable.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to left:500px for 2s

+   *  $("#foo").animate("left:'500px'", 2000);

+   * </pre>

+   * 

+   * In addition to numeric values, each property can take the strings 'show',

+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing

+   * animations that take into account the display type of the element. Animated

+   * properties can also be relative. If a value is supplied with a leading +=

+   * or -= sequence of characters, then the target value is computed by adding

+   * or subtracting the given number from the current value of the property.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  //move the element from its original position to 500px to the left for 1000ms and

+   *  // change the background color of the element at the end of the animation

+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){

+   *                  

+   *                 public void f(Element e){

+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);

+   *                 }

+   *                 

+   *              });

+   * </pre>

+   * 

+   * 

+   * For color css properties, values can be specified via hexadecimal or rgb or

+   * literal values.

+   * 

+   * Example:

+   * 

+   * <pre class="code">

+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");

+   * </pre>

+   * 

+   */

   public Effects animate(String prop, int duration, Function... funcs) {

     return animate($$(prop), duration, Easing.LINEAR, funcs);

   }

 

   /**

-   * Animate the set of matched elements using the clip property.

-   * It is possible to show or hide a set of elements, 

-   * specify the direction of the animation and the start corner of the effect.

-   * Finally it executes the set of functions passed as arguments.

+   * Animate the set of matched elements using the clip property. It is possible

+   * to show or hide a set of elements, specify the direction of the animation

+   * and the start corner of the effect. Finally it executes the set of

+   * functions passed as arguments.

    */

   public Effects clip(ClipAnimation.Action a, ClipAnimation.Corner c,

       ClipAnimation.Direction d, Function... f) {

@@ -148,8 +234,9 @@ public class Effects extends QueuePlugin<Effects>  {
    * and the start corner of the effect. Finally it executes the set of

    * functions passed as arguments.

    */

-  public Effects clip(final ClipAnimation.Action a, final ClipAnimation.Corner c, 

-      final ClipAnimation.Direction d, final int duration, final Function... f) {

+  public Effects clip(final ClipAnimation.Action a,

+      final ClipAnimation.Corner c, final ClipAnimation.Direction d,

+      final int duration, final Function... f) {

     queue(new Function() {

       public void cancel(Element e) {

         Animation anim = (Animation) data(e, EFFECTS_RUNNNING, null);

@@ -168,10 +255,10 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * Animate the set of matched elements using the clip property.

-   * It is possible to show or hide a set of elements, 

-   * specify the direction of the animation and the start corner of the effect.

-   * Finally it executes the set of functions passed as arguments.

+   * Animate the set of matched elements using the clip property. It is possible

+   * to show or hide a set of elements, specify the direction of the animation

+   * and the start corner of the effect. Finally it executes the set of

+   * functions passed as arguments.

    */

   public Effects clip(ClipAnimation.Action a, ClipAnimation.Corner c,

       Function... f) {

@@ -180,8 +267,8 @@ public class Effects extends QueuePlugin<Effects>  {
 

   /**

    * Reveal all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the center to the perimeter.

+   * optional callback after completion. The effect goes from the center to the

+   * perimeter.

    */

   public Effects clipAppear(Function... f) {

     return clipAppear(Speed.DEFAULT, f);

@@ -189,8 +276,8 @@ public class Effects extends QueuePlugin<Effects>  {
 

   /**

    * Reveal all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the center to the perimeter.

+   * optional callback after completion. The effect goes from the center to the

+   * perimeter.

    */

   public Effects clipAppear(int millisecs, Function... f) {

     return clip(ClipAnimation.Action.SHOW, ClipAnimation.Corner.CENTER,

@@ -198,18 +285,18 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * Hide all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the perimeter to the center.

+   * Hide all matched elements by adjusting the clip property firing an optional

+   * callback after completion. The effect goes from the perimeter to the

+   * center.

    */

   public Effects clipDisappear(Function... f) {

     return clipDisappear(Speed.DEFAULT, f);

   }

 

   /**

-   * Hide all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the perimeter to the center.

+   * Hide all matched elements by adjusting the clip property firing an optional

+   * callback after completion. The effect goes from the perimeter to the

+   * center.

    */

   public Effects clipDisappear(int millisecs, Function... f) {

     return clip(ClipAnimation.Action.HIDE, ClipAnimation.Corner.CENTER,

@@ -218,8 +305,8 @@ public class Effects extends QueuePlugin<Effects>  {
 

   /**

    * Reveal all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the top to the bottom.

+   * optional callback after completion. The effect goes from the top to the

+   * bottom.

    */

   public Effects clipDown(Function... f) {

     return clipDown(Speed.DEFAULT, f);

@@ -227,8 +314,8 @@ public class Effects extends QueuePlugin<Effects>  {
 

   /**

    * Reveal all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the top to the bottom.

+   * optional callback after completion. The effect goes from the top to the

+   * bottom.

    */

   public Effects clipDown(int millisecs, Function... f) {

     return clip(Action.SHOW, ClipAnimation.Corner.TOP_LEFT,

@@ -236,18 +323,18 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * Toggle the visibility of all matched elements by adjusting the clip property

-   * and firing an optional callback after completion.

-   * The effect goes from the bottom to the top.

+   * Toggle the visibility of all matched elements by adjusting the clip

+   * property and firing an optional callback after completion. The effect goes

+   * from the bottom to the top.

    */

   public Effects clipToggle(Function... f) {

     return clipToggle(Speed.DEFAULT, f);

   }

 

   /**

-   * Toggle the visibility of all matched elements by adjusting the clip property

-   * and firing an optional callback after completion.

-   * The effect goes from the bottom to the top.

+   * Toggle the visibility of all matched elements by adjusting the clip

+   * property and firing an optional callback after completion. The effect goes

+   * from the bottom to the top.

    */

   public Effects clipToggle(int millisecs, Function... f) {

     return clip(Action.TOGGLE, ClipAnimation.Corner.TOP_LEFT,

@@ -255,18 +342,16 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * Hide all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the bottom to the top.

+   * Hide all matched elements by adjusting the clip property firing an optional

+   * callback after completion. The effect goes from the bottom to the top.

    */

   public Effects clipUp(Function... f) {

     return clipUp(Speed.DEFAULT, f);

   }

 

   /**

-   * Hide all matched elements by adjusting the clip property firing an

-   * optional callback after completion.

-   * The effect goes from the bottom to the top.

+   * Hide all matched elements by adjusting the clip property firing an optional

+   * callback after completion. The effect goes from the bottom to the top.

    */

   public Effects clipUp(int millisecs, Function... f) {

     return clip(Action.HIDE, ClipAnimation.Corner.TOP_LEFT,

@@ -278,7 +363,7 @@ public class Effects extends QueuePlugin<Effects>  {
    * optional callback after completion. Only the opacity is adjusted for this

    * animation, meaning that all of the matched elements should already have

    * some form of height and width associated with them.

-   */  

+   */

   public Effects fadeIn(Function... f) {

     return fadeIn(Speed.DEFAULT, f);

   }

@@ -299,7 +384,7 @@ public class Effects extends QueuePlugin<Effects>  {
    * the opacity is adjusted for this animation, meaning that all of the matched

    * elements should already have some form of height and width associated with

    * them.

-   */  

+   */

   public Effects fadeOut(Function... f) {

     return fadeOut(Speed.DEFAULT, f);

   }

@@ -310,11 +395,11 @@ public class Effects extends QueuePlugin<Effects>  {
    * the opacity is adjusted for this animation, meaning that all of the matched

    * elements should already have some form of height and width associated with

    * them.

-   */  

+   */

   public Effects fadeOut(int millisecs, Function... f) {

     return animate("opacity: 'hide'", millisecs, f);

   };

-  

+

   /**

    * Fade the opacity of all matched elements to a specified opacity and firing

    * an optional callback after completion. Only the opacity is adjusted for

@@ -378,16 +463,16 @@ public class Effects extends QueuePlugin<Effects>  {
   }

 

   /**

-   * Reveal all matched elements by adjusting their width and firing an

-   * optional callback after completion.

+   * Reveal all matched elements by adjusting their width and firing an optional

+   * callback after completion.

    */

   public Effects slideRight(Function... f) {

     return slideRight(Speed.DEFAULT, f);

   }

 

   /**

-   * Reveal all matched elements by adjusting their width and firing an

-   * optional callback after completion.

+   * Reveal all matched elements by adjusting their width and firing an optional

+   * callback after completion.

    */

   public Effects slideRight(final int millisecs, Function... f) {

     return animate("width: 'show'", millisecs, f);

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
index d62d037a..e036169b 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
@@ -29,64 +29,150 @@ import com.google.gwt.query.client.LazyBase;
 public interface LazyEffects<T> extends LazyBase<T>{
 
   /**
-   * The animate() method allows us to create animation effects on any numeric CSS property. 
-   * The only required parameter is a map of CSS properties. 
-   * This map is similar to the one that can be sent to the .css() method, 
-   * except that the range of properties is more restrictive.
-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 
-   * (For example, width, height, or left can be animated but background-color cannot be.) 
-   * Property values are treated as a number of pixels unless otherwise specified.
-   *  The units em and % can be specified where applicable.
-   *  
-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 
-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 
-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 
-   *  from the current value of the property.
-   */  
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property or any color CSS property.
+   * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to the position top:500px and left:500px for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   * </pre>
+   */
   LazyEffects<T> animate(Properties p, int duration, Easing easing, Function... funcs);
 
   /**
-   * The animate() method allows us to create animation effects on any numeric CSS property. 
-   * The only required parameter is a map of CSS properties. 
-   * This map is similar to the one that can be sent to the .css() method, 
-   * except that the range of properties is more restrictive.
-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 
-   * (For example, width, height, or left can be animated but background-color cannot be.) 
-   * Property values are treated as a number of pixels unless otherwise specified.
-   *  The units em and % can be specified where applicable.
-   *  
-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 
-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 
-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 
-   *  from the current value of the property.
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property or any color CSS property.
+   * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 500ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * The duration of the animation is 500ms.
+   * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   * </pre>
    */
   LazyEffects<T> animate(String prop, Function... funcs);
 
   /**
-   * The animate() method allows us to create animation effects on any numeric CSS property. 
-   * The only required parameter is a map of CSS properties. 
-   * This map is similar to the one that can be sent to the .css() method, 
-   * except that the range of properties is more restrictive.
-   * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. 
-   * (For example, width, height, or left can be animated but background-color cannot be.) 
-   * Property values are treated as a number of pixels unless otherwise specified.
-   *  The units em and % can be specified where applicable.
-   *  
-   *  In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. 
-   *  These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
-   *  Animated properties can also be relative. If a value is supplied with a leading += or -= 
-   *  sequence of characters, then the target value is computed by adding or subtracting the given number 
-   *  from the current value of the property.
-   */  
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property or any color CSS property.
+   * 
+   * Concerning numeric property, values are treated as a number of pixels
+   * unless otherwise specified. The units em and % can be specified where
+   * applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 1000ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * 
+   * For color css properties, values can be specified via hexadecimal or rgb or
+   * literal values.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   * </pre>
+   * 
+   */
   LazyEffects<T> animate(String prop, int duration, Function... funcs);
 
   /**
-   * Animate the set of matched elements using the clip property.
-   * It is possible to show or hide a set of elements, 
-   * specify the direction of the animation and the start corner of the effect.
-   * Finally it executes the set of functions passed as arguments.
+   * Animate the set of matched elements using the clip property. It is possible
+   * to show or hide a set of elements, specify the direction of the animation
+   * and the start corner of the effect. Finally it executes the set of
+   * functions passed as arguments.
    */
   LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, ClipAnimation.Direction d, Function... f);
 
@@ -99,80 +185,78 @@ public interface LazyEffects<T> extends LazyBase<T>{
   LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, ClipAnimation.Direction d, int duration, Function... f);
 
   /**
-   * Animate the set of matched elements using the clip property.
-   * It is possible to show or hide a set of elements, 
-   * specify the direction of the animation and the start corner of the effect.
-   * Finally it executes the set of functions passed as arguments.
+   * Animate the set of matched elements using the clip property. It is possible
+   * to show or hide a set of elements, specify the direction of the animation
+   * and the start corner of the effect. Finally it executes the set of
+   * functions passed as arguments.
    */
   LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, Function... f);
 
   /**
    * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the center to the perimeter.
+   * optional callback after completion. The effect goes from the center to the
+   * perimeter.
    */
   LazyEffects<T> clipAppear(Function... f);
 
   /**
    * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the center to the perimeter.
+   * optional callback after completion. The effect goes from the center to the
+   * perimeter.
    */
   LazyEffects<T> clipAppear(int millisecs, Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the perimeter to the center.
+   * Hide all matched elements by adjusting the clip property firing an optional
+   * callback after completion. The effect goes from the perimeter to the
+   * center.
    */
   LazyEffects<T> clipDisappear(Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the perimeter to the center.
+   * Hide all matched elements by adjusting the clip property firing an optional
+   * callback after completion. The effect goes from the perimeter to the
+   * center.
    */
   LazyEffects<T> clipDisappear(int millisecs, Function... f);
 
   /**
    * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the top to the bottom.
+   * optional callback after completion. The effect goes from the top to the
+   * bottom.
    */
   LazyEffects<T> clipDown(Function... f);
 
   /**
    * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the top to the bottom.
+   * optional callback after completion. The effect goes from the top to the
+   * bottom.
    */
   LazyEffects<T> clipDown(int millisecs, Function... f);
 
   /**
-   * Toggle the visibility of all matched elements by adjusting the clip property
-   * and firing an optional callback after completion.
-   * The effect goes from the bottom to the top.
+   * Toggle the visibility of all matched elements by adjusting the clip
+   * property and firing an optional callback after completion. The effect goes
+   * from the bottom to the top.
    */
   LazyEffects<T> clipToggle(Function... f);
 
   /**
-   * Toggle the visibility of all matched elements by adjusting the clip property
-   * and firing an optional callback after completion.
-   * The effect goes from the bottom to the top.
+   * Toggle the visibility of all matched elements by adjusting the clip
+   * property and firing an optional callback after completion. The effect goes
+   * from the bottom to the top.
    */
   LazyEffects<T> clipToggle(int millisecs, Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the bottom to the top.
+   * Hide all matched elements by adjusting the clip property firing an optional
+   * callback after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipUp(Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an
-   * optional callback after completion.
-   * The effect goes from the bottom to the top.
+   * Hide all matched elements by adjusting the clip property firing an optional
+   * callback after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipUp(int millisecs, Function... f);
 
@@ -181,7 +265,7 @@ public interface LazyEffects<T> extends LazyBase<T>{
    * optional callback after completion. Only the opacity is adjusted for this
    * animation, meaning that all of the matched elements should already have
    * some form of height and width associated with them.
-   */  
+   */
   LazyEffects<T> fadeIn(Function... f);
 
   /**
@@ -198,7 +282,7 @@ public interface LazyEffects<T> extends LazyBase<T>{
    * the opacity is adjusted for this animation, meaning that all of the matched
    * elements should already have some form of height and width associated with
    * them.
-   */  
+   */
   LazyEffects<T> fadeOut(Function... f);
 
   /**
@@ -207,7 +291,7 @@ public interface LazyEffects<T> extends LazyBase<T>{
    * the opacity is adjusted for this animation, meaning that all of the matched
    * elements should already have some form of height and width associated with
    * them.
-   */  
+   */
   LazyEffects<T> fadeOut(int millisecs, Function... f);
 
   /**
@@ -259,14 +343,14 @@ public interface LazyEffects<T> extends LazyBase<T>{
   LazyEffects<T> slideLeft(int millisecs, Function... f);
 
   /**
-   * Reveal all matched elements by adjusting their width and firing an
-   * optional callback after completion.
+   * Reveal all matched elements by adjusting their width and firing an optional
+   * callback after completion.
    */
   LazyEffects<T> slideRight(Function... f);
 
   /**
-   * Reveal all matched elements by adjusting their width and firing an
-   * optional callback after completion.
+   * Reveal all matched elements by adjusting their width and firing an optional
+   * callback after completion.
    */
   LazyEffects<T> slideRight(int millisecs, Function... f);