From: Julien Dramaix Date: Fri, 22 Apr 2011 09:33:16 +0000 (+0000) Subject: update javadocs X-Git-Tag: release-1.3.2~390 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=02521815d7c775f426915c9698e857f0602774f7;p=gwtquery.git update javadocs --- 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 { private static JsNodeArray copyNodeList(NodeList 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 { /** * 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 { * $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING); * * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   *
+ * * @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 { } /** + * * 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 { * * The duration of the animation is 500ms. * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   *
+ * * @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 { /** * 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 { * * * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   *
+ * + * * @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 extends LazyBase{ /** * 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 extends LazyBase{ * $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING); * * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   *
+ * * @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 extends LazyBase{ LazyGQuery 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 extends LazyBase{ * * The duration of the animation is 500ms. * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   *
+ * * @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 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 extends LazyBase{ * * * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   *
+ * + * * @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 { - +public class Effects extends QueuePlugin { + /** * Just a class to store predefined speed constant values. */ @@ -57,21 +57,45 @@ public class Effects extends QueuePlugin { } /** - * 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: + * + * 
+   *  //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);
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *
+ * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   *
+ */ 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 { } /** - * 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: + * + * 
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * The duration of the animation is 500ms. + * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   *
*/ 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: + * + * 
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   *
+ * + */ 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 { * 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 { } /** - * 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 { /** * 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 { /** * 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 { } /** - * 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 { /** * 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 { /** * 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 { } /** - * 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 { } /** - * 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 { * 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 { * 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 { * 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 { } /** - * 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 extends LazyBase{ /** - * 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: + * + * 
+   *  //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);
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *
+ * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);
+   *
+ */ LazyEffects 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: + * + * 
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * The duration of the animation is 500ms. + * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");
+   *
*/ LazyEffects 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: + * + * 
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   *
+ * + * 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: + * + * 
+   *  //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);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * + * For color css properties, values can be specified via hexadecimal or rgb or + * literal values. + * + * Example: + * + * 
+   *  $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");
+   *
+ * + */ LazyEffects 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 clip(ClipAnimation.Action a, ClipAnimation.Corner c, ClipAnimation.Direction d, Function... f); @@ -99,80 +185,78 @@ public interface LazyEffects extends LazyBase{ LazyEffects 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 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 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 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 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 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 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 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 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 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 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 clipUp(int millisecs, Function... f); @@ -181,7 +265,7 @@ public interface LazyEffects extends LazyBase{ * 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 fadeIn(Function... f); /** @@ -198,7 +282,7 @@ public interface LazyEffects extends LazyBase{ * 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 fadeOut(Function... f); /** @@ -207,7 +291,7 @@ public interface LazyEffects extends LazyBase{ * 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 fadeOut(int millisecs, Function... f); /** @@ -259,14 +343,14 @@ public interface LazyEffects extends LazyBase{ LazyEffects 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 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 slideRight(int millisecs, Function... f);