\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS property, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric properties, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to the position top:500px and left:500px for 400ms.\r
* //use a swing easing function for the transition\r
* $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);\r
+ * // Change the width and border attributes of a table\r
+ * $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
/**\r
* \r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS property, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric properties, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to left:500px for 500ms\r
* $("#foo").animate("left:'500'");\r
+ * // Change the width attribute of a table\r
+ * $("table").animate("$width:'500'"), 400, Easing.LINEAR);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS properties, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric property, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to left:500px for 2s\r
* $("#foo").animate("left:'500px'", 2000);\r
+ * // Change the width attribute of a table\r
+ * $("table").animate("$width:'500'"), 400);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
* //move the element from its original position to 500px to the left for 1000ms and\r
* // change the background color of the element at the end of the animation\r
* $("#foo").animate("left:'+=500'", 1000, new Function(){\r
- * \r
- * public void f(Element e){\r
- * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
- * }\r
- * \r
- * });\r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
+ * }\r
+ * });\r
* </pre>\r
* \r
* \r
/**
* 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',
/**
*
* 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',
/**
* 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',
* //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>
*
*
\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS property, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric properties, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to the position top:500px and left:500px for 400ms.\r
* //use a swing easing function for the transition\r
* $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);\r
+ * // Change the width and border attributes of a table\r
+ * $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
* <pre class="code">\r
* $("#foo").animate(Properties.create("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING);\r
* </pre>\r
+ * \r
+ * @param p a {@link Properties} object containing css properties to animate.\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
+ * @param duration the duration in milliseconds of the animation\r
+ * @param easing the easing function to use for the transition\r
*/\r
public Effects animate(final Properties p, final int duration,\r
final Easing easing, final Function... funcs) {\r
}\r
\r
/**\r
+ * \r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS property, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric properties, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to left:500px for 500ms\r
* $("#foo").animate("left:'500'");\r
+ * // Change the width attribute of a table\r
+ * $("table").animate("$width:'500'"), 400, Easing.LINEAR);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
* <pre class="code">\r
* $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");\r
* </pre>\r
+ * \r
+ * @param prop the property to animate : "cssName:'value'"\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
*/\r
public Effects animate(String prop, Function... funcs) {\r
return animate(prop, 500, funcs);\r
\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property or any color CSS property.\r
+ * Attribute, CSS properties, or color CSS property.\r
* \r
- * Concerning numeric property, values are treated as a number of pixels\r
+ * Concerning to numeric property, values are treated as a number of pixels\r
* unless otherwise specified. The units em and % can be specified where\r
* applicable.\r
* \r
+ * By default animate considers css properties, if you wanted to animate element\r
+ * attributes you should to prepend the symbol dollar to the attribute name.\r
+ * \r
* Example:\r
* \r
* <pre class="code">\r
* //move the element from its original position to left:500px for 2s\r
* $("#foo").animate("left:'500px'", 2000);\r
+ * // Change the width attribute of a table\r
+ * $("table").animate("$width:'500'"), 400);\r
* </pre>\r
* \r
* In addition to numeric values, each property can take the strings 'show',\r
* //move the element from its original position to 500px to the left for 1000ms and\r
* // change the background color of the element at the end of the animation\r
* $("#foo").animate("left:'+=500'", 1000, new Function(){\r
- * \r
- * public void f(Element e){\r
- * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
- * }\r
- * \r
- * });\r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
+ * }\r
+ * });\r
* </pre>\r
* \r
* \r
* $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");\r
* </pre>\r
* \r
+ * \r
+ * @param prop the property to animate : "cssName:'value'"\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
+ * @param duration the duration in milliseconds of the animation\r
*/\r
public Effects animate(String prop, int duration, Function... funcs) {\r
return animate($$(prop), duration, Easing.LINEAR, funcs);\r
/**
* 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',
* <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',
* <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',
* //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>
*
*
* $("#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);