From: Manolo Carrasco <manolo@apache.org>
Date: Mon, 25 Apr 2011 09:35:27 +0000 (+0000)
Subject: update animate javadoc
X-Git-Tag: release-1.3.2~377
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=fde922a40b25b2cfa57b8bcc209d4a3c5bc38f76;p=gwtquery.git

update animate javadoc
---

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 1fd4a158..bda6ba0b 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
@@ -572,18 +572,23 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * 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);
+   *  // Change the width and border attributes of a table
+   *  $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -624,17 +629,22 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   /**
    * 
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 500ms
    *  $("#foo").animate("left:'500'");
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -679,17 +689,22 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS properties, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric property, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 2s
    *  $("#foo").animate("left:'500px'", 2000);
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -705,12 +720,10 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    *  //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);
-   *                 }
-   *                 
-   *              });
+   *     public void f(Element e){
+   *       $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *     }
+   *  });
    * </pre>
    * 
    * 
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 f53506db..ff82f79d 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,18 +107,23 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * 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);
+   *  // Change the width and border attributes of a table
+   *  $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -156,17 +161,22 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   /**
    * 
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 500ms
    *  $("#foo").animate("left:'500'");
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -209,17 +219,22 @@ public interface LazyGQuery<T> extends LazyBase<T>{
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS properties, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric property, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 2s
    *  $("#foo").animate("left:'500px'", 2000);
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -235,12 +250,10 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    *  //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);
-   *                 }
-   *                 
-   *              });
+   *     public void f(Element e){
+   *       $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *     }
+   *  });
    * </pre>
    * 
    * 
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 e45c1e95..32ad902c 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
@@ -58,18 +58,23 @@ public class Effects extends QueuePlugin<Effects> {
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * 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);
+   *  // Change the width and border attributes of a table
+   *  $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -95,6 +100,12 @@ public class Effects extends QueuePlugin<Effects> {
    * <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
+   * @param duration the duration in milliseconds of the animation
+   * @param easing the easing function to use for the transition
    */
   public Effects animate(final Properties p, final int duration,
       final Easing easing, final Function... funcs) {
@@ -116,18 +127,24 @@ public class Effects extends QueuePlugin<Effects> {
   }
 
   /**
+   * 
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 500ms
    *  $("#foo").animate("left:'500'");
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -161,6 +178,10 @@ public class Effects extends QueuePlugin<Effects> {
    * <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
    */
   public Effects animate(String prop, Function... funcs) {
     return animate(prop, 500, funcs);
@@ -168,17 +189,22 @@ public class Effects extends QueuePlugin<Effects> {
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS properties, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric property, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 2s
    *  $("#foo").animate("left:'500px'", 2000);
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -194,12 +220,10 @@ public class Effects extends QueuePlugin<Effects> {
    *  //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);
-   *                 }
-   *                 
-   *              });
+   *     public void f(Element e){
+   *       $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *     }
+   *  });
    * </pre>
    * 
    * 
@@ -212,6 +236,11 @@ public class Effects extends QueuePlugin<Effects> {
    *  $("#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
+   * @param duration the duration in milliseconds of the animation
    */
   public Effects animate(String prop, int duration, Function... funcs) {
     return animate($$(prop), duration, Easing.LINEAR, funcs);
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 e036169b..0a60c32d 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
@@ -30,18 +30,23 @@ public interface LazyEffects<T> extends LazyBase<T>{
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * 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);
+   *  // Change the width and border attributes of a table
+   *  $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -67,22 +72,34 @@ public interface LazyEffects<T> extends LazyBase<T>{
    * <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
+   * @param duration the duration in milliseconds of the animation
+   * @param easing the easing function to use for the transition
    */
   LazyEffects<T> animate(Properties p, int duration, Easing easing, Function... funcs);
 
   /**
+   * 
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS property, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric properties, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 500ms
    *  $("#foo").animate("left:'500'");
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400, Easing.LINEAR);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -116,22 +133,31 @@ public interface LazyEffects<T> extends LazyBase<T>{
    * <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
    */
   LazyEffects<T> animate(String prop, Function... funcs);
 
   /**
    * The animate() method allows you to create animation effects on any numeric
-   * CSS property or any color CSS property.
+   * Attribute, CSS properties, or color CSS property.
    * 
-   * Concerning numeric property, values are treated as a number of pixels
+   * Concerning to numeric property, values are treated as a number of pixels
    * unless otherwise specified. The units em and % can be specified where
    * applicable.
    * 
+   * By default animate considers css properties, if you wanted to animate element
+   * attributes you should to prepend the symbol dollar to the attribute name.
+   * 
    * Example:
    * 
    * <pre class="code">
    *  //move the element from its original position to left:500px for 2s
    *  $("#foo").animate("left:'500px'", 2000);
+   *  // Change the width attribute of a table
+   *  $("table").animate("$width:'500'"), 400);
    * </pre>
    * 
    * In addition to numeric values, each property can take the strings 'show',
@@ -147,12 +173,10 @@ public interface LazyEffects<T> extends LazyBase<T>{
    *  //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);
-   *                 }
-   *                 
-   *              });
+   *     public void f(Element e){
+   *       $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *     }
+   *  });
    * </pre>
    * 
    * 
@@ -165,6 +189,11 @@ public interface LazyEffects<T> extends LazyBase<T>{
    *  $("#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
+   * @param duration the duration in milliseconds of the animation
    */
   LazyEffects<T> animate(String prop, int duration, Function... funcs);