private static JsNodeArray copyNodeList(NodeList<? extends Node> n) {\r
JsNodeArray res = JsNodeArray.create();\r
for (int i = 0; i < n.getLength(); i++) {\r
- res.addNode(n.getItem(i));\r
+ res.addNode(n.getItem(i), i);\r
}\r
return res;\r
}\r
\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property. All animated properties should be numeric, non-numeric cannot\r
- * be animated using basic functionality. (For example, width, height, or left\r
- * can be animated but background-color cannot be.) Property values are\r
- * treated as a number of pixels unless otherwise specified. The units em and\r
- * % can be specified where applicable.\r
+ * CSS property or any color CSS property.\r
+ * \r
+ * Concerning 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
* Example:\r
* \r
* $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);\r
* </pre>\r
* \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \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
}\r
\r
/**\r
+ * \r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property. All animated properties should be numeric, non-numeric cannot\r
- * be animated using basic functionality. (For example, width, height, or left\r
- * can be animated but background-color cannot be.) Property values are\r
- * treated as a number of pixels unless otherwise specified. The units em and\r
- * % can be specified where applicable.\r
+ * CSS property or any color CSS property.\r
+ * \r
+ * Concerning 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
* Example:\r
* \r
* \r
* The duration of the animation is 500ms.\r
* \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \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
- * @param duration the duration in milliseconds of the animation\r
*/\r
public GQuery animate(String prop, Function... funcs) {\r
return as(Effects).animate(prop, funcs);\r
\r
/**\r
* The animate() method allows you to create animation effects on any numeric\r
- * CSS property. All animated properties should be numeric, non-numeric cannot\r
- * be animated using basic functionality. (For example, width, height, or left\r
- * can be animated but background-color cannot be.) Property values are\r
- * treated as a number of pixels unless otherwise specified. The units em and\r
- * % can be specified where applicable.\r
+ * CSS property or any color CSS property.\r
* \r
+ * Concerning 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
* Example:\r
* \r
* </pre>\r
* \r
* \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\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
/**
* 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:
*
* $("#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
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:
*
*
* 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:
*
* </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
import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;\r
\r
/**\r
- * Effects plugin for Gwt Query. \r
+ * Effects plugin for Gwt Query.\r
*/\r
-public class Effects extends QueuePlugin<Effects> {\r
- \r
+public class Effects extends QueuePlugin<Effects> {\r
+\r
/**\r
* Just a class to store predefined speed constant values.\r
*/\r
}\r
\r
/**\r
- * The animate() method allows us to create animation effects on any numeric CSS property. \r
- * The only required parameter is a map of CSS properties. \r
- * This map is similar to the one that can be sent to the .css() method, \r
- * except that the range of properties is more restrictive.\r
- * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. \r
- * (For example, width, height, or left can be animated but background-color cannot be.) \r
- * Property values are treated as a number of pixels unless otherwise specified.\r
- * The units em and % can be specified where applicable.\r
- * \r
- * In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. \r
- * These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.\r
- * Animated properties can also be relative. If a value is supplied with a leading += or -= \r
- * sequence of characters, then the target value is computed by adding or subtracting the given number \r
- * from the current value of the property.\r
- */ \r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property or any color CSS property.\r
+ * \r
+ * Concerning 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
+ * 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
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to 500px to the left and 5OOpx down for 400ms.\r
+ * //use a swing easing function for the transition\r
+ * $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);\r
+ * </pre>\r
+ * \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \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
public Effects animate(final Properties p, final int duration,\r
final Easing easing, final Function... funcs) {\r
queue(new Function() {\r
}\r
\r
/**\r
- * The animate() method allows us to create animation effects on any numeric CSS property. \r
- * The only required parameter is a map of CSS properties. \r
- * This map is similar to the one that can be sent to the .css() method, \r
- * except that the range of properties is more restrictive.\r
- * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. \r
- * (For example, width, height, or left can be animated but background-color cannot be.) \r
- * Property values are treated as a number of pixels unless otherwise specified.\r
- * The units em and % can be specified where applicable.\r
- * \r
- * In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. \r
- * These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.\r
- * Animated properties can also be relative. If a value is supplied with a leading += or -= \r
- * sequence of characters, then the target value is computed by adding or subtracting the given number \r
- * from the current value of the property.\r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property or any color CSS property.\r
+ * \r
+ * Concerning 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
+ * 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
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to 500px to the left for 500ms and\r
+ * // change the background color of the element at the end of the animation\r
+ * $("#foo").animate("left:'+=500'", new Function(){\r
+ * \r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
+ * }\r
+ * \r
+ * });\r
+ * </pre>\r
+ * \r
+ * The duration of the animation is 500ms.\r
+ * \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'");\r
+ * </pre>\r
*/\r
public Effects animate(String prop, Function... funcs) {\r
return animate(prop, 500, funcs);\r
}\r
\r
/**\r
- * The animate() method allows us to create animation effects on any numeric CSS property. \r
- * The only required parameter is a map of CSS properties. \r
- * This map is similar to the one that can be sent to the .css() method, \r
- * except that the range of properties is more restrictive.\r
- * All animated properties should be numeric, non-numeric cannot be animated using basic functionality. \r
- * (For example, width, height, or left can be animated but background-color cannot be.) \r
- * Property values are treated as a number of pixels unless otherwise specified.\r
- * The units em and % can be specified where applicable.\r
- * \r
- * In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. \r
- * These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.\r
- * Animated properties can also be relative. If a value is supplied with a leading += or -= \r
- * sequence of characters, then the target value is computed by adding or subtracting the given number \r
- * from the current value of the property.\r
- */ \r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property or any color CSS property.\r
+ * \r
+ * Concerning 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
+ * 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
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\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
+ * </pre>\r
+ * \r
+ * \r
+ * For color css properties, values can be specified via hexadecimal or rgb or\r
+ * literal values.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)', 1000");\r
+ * </pre>\r
+ * \r
+ */\r
public Effects animate(String prop, int duration, Function... funcs) {\r
return animate($$(prop), duration, Easing.LINEAR, funcs);\r
}\r
\r
/**\r
- * Animate the set of matched elements using the clip property.\r
- * It is possible to show or hide a set of elements, \r
- * specify the direction of the animation and the start corner of the effect.\r
- * Finally it executes the set of functions passed as arguments.\r
+ * Animate the set of matched elements using the clip property. It is possible\r
+ * to show or hide a set of elements, specify the direction of the animation\r
+ * and the start corner of the effect. Finally it executes the set of\r
+ * functions passed as arguments.\r
*/\r
public Effects clip(ClipAnimation.Action a, ClipAnimation.Corner c,\r
ClipAnimation.Direction d, Function... f) {\r
* and the start corner of the effect. Finally it executes the set of\r
* functions passed as arguments.\r
*/\r
- public Effects clip(final ClipAnimation.Action a, final ClipAnimation.Corner c, \r
- final ClipAnimation.Direction d, final int duration, final Function... f) {\r
+ public Effects clip(final ClipAnimation.Action a,\r
+ final ClipAnimation.Corner c, final ClipAnimation.Direction d,\r
+ final int duration, final Function... f) {\r
queue(new Function() {\r
public void cancel(Element e) {\r
Animation anim = (Animation) data(e, EFFECTS_RUNNNING, null);\r
}\r
\r
/**\r
- * Animate the set of matched elements using the clip property.\r
- * It is possible to show or hide a set of elements, \r
- * specify the direction of the animation and the start corner of the effect.\r
- * Finally it executes the set of functions passed as arguments.\r
+ * Animate the set of matched elements using the clip property. It is possible\r
+ * to show or hide a set of elements, specify the direction of the animation\r
+ * and the start corner of the effect. Finally it executes the set of\r
+ * functions passed as arguments.\r
*/\r
public Effects clip(ClipAnimation.Action a, ClipAnimation.Corner c,\r
Function... f) {\r
\r
/**\r
* Reveal all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the center to the perimeter.\r
+ * optional callback after completion. The effect goes from the center to the\r
+ * perimeter.\r
*/\r
public Effects clipAppear(Function... f) {\r
return clipAppear(Speed.DEFAULT, f);\r
\r
/**\r
* Reveal all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the center to the perimeter.\r
+ * optional callback after completion. The effect goes from the center to the\r
+ * perimeter.\r
*/\r
public Effects clipAppear(int millisecs, Function... f) {\r
return clip(ClipAnimation.Action.SHOW, ClipAnimation.Corner.CENTER,\r
}\r
\r
/**\r
- * Hide all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the perimeter to the center.\r
+ * Hide all matched elements by adjusting the clip property firing an optional\r
+ * callback after completion. The effect goes from the perimeter to the\r
+ * center.\r
*/\r
public Effects clipDisappear(Function... f) {\r
return clipDisappear(Speed.DEFAULT, f);\r
}\r
\r
/**\r
- * Hide all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the perimeter to the center.\r
+ * Hide all matched elements by adjusting the clip property firing an optional\r
+ * callback after completion. The effect goes from the perimeter to the\r
+ * center.\r
*/\r
public Effects clipDisappear(int millisecs, Function... f) {\r
return clip(ClipAnimation.Action.HIDE, ClipAnimation.Corner.CENTER,\r
\r
/**\r
* Reveal all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the top to the bottom.\r
+ * optional callback after completion. The effect goes from the top to the\r
+ * bottom.\r
*/\r
public Effects clipDown(Function... f) {\r
return clipDown(Speed.DEFAULT, f);\r
\r
/**\r
* Reveal all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the top to the bottom.\r
+ * optional callback after completion. The effect goes from the top to the\r
+ * bottom.\r
*/\r
public Effects clipDown(int millisecs, Function... f) {\r
return clip(Action.SHOW, ClipAnimation.Corner.TOP_LEFT,\r
}\r
\r
/**\r
- * Toggle the visibility of all matched elements by adjusting the clip property\r
- * and firing an optional callback after completion.\r
- * The effect goes from the bottom to the top.\r
+ * Toggle the visibility of all matched elements by adjusting the clip\r
+ * property and firing an optional callback after completion. The effect goes\r
+ * from the bottom to the top.\r
*/\r
public Effects clipToggle(Function... f) {\r
return clipToggle(Speed.DEFAULT, f);\r
}\r
\r
/**\r
- * Toggle the visibility of all matched elements by adjusting the clip property\r
- * and firing an optional callback after completion.\r
- * The effect goes from the bottom to the top.\r
+ * Toggle the visibility of all matched elements by adjusting the clip\r
+ * property and firing an optional callback after completion. The effect goes\r
+ * from the bottom to the top.\r
*/\r
public Effects clipToggle(int millisecs, Function... f) {\r
return clip(Action.TOGGLE, ClipAnimation.Corner.TOP_LEFT,\r
}\r
\r
/**\r
- * Hide all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the bottom to the top.\r
+ * Hide all matched elements by adjusting the clip property firing an optional\r
+ * callback after completion. The effect goes from the bottom to the top.\r
*/\r
public Effects clipUp(Function... f) {\r
return clipUp(Speed.DEFAULT, f);\r
}\r
\r
/**\r
- * Hide all matched elements by adjusting the clip property firing an\r
- * optional callback after completion.\r
- * The effect goes from the bottom to the top.\r
+ * Hide all matched elements by adjusting the clip property firing an optional\r
+ * callback after completion. The effect goes from the bottom to the top.\r
*/\r
public Effects clipUp(int millisecs, Function... f) {\r
return clip(Action.HIDE, ClipAnimation.Corner.TOP_LEFT,\r
* optional callback after completion. Only the opacity is adjusted for this\r
* animation, meaning that all of the matched elements should already have\r
* some form of height and width associated with them.\r
- */ \r
+ */\r
public Effects fadeIn(Function... f) {\r
return fadeIn(Speed.DEFAULT, f);\r
}\r
* the opacity is adjusted for this animation, meaning that all of the matched\r
* elements should already have some form of height and width associated with\r
* them.\r
- */ \r
+ */\r
public Effects fadeOut(Function... f) {\r
return fadeOut(Speed.DEFAULT, f);\r
}\r
* the opacity is adjusted for this animation, meaning that all of the matched\r
* elements should already have some form of height and width associated with\r
* them.\r
- */ \r
+ */\r
public Effects fadeOut(int millisecs, Function... f) {\r
return animate("opacity: 'hide'", millisecs, f);\r
};\r
- \r
+\r
/**\r
* Fade the opacity of all matched elements to a specified opacity and firing\r
* an optional callback after completion. Only the opacity is adjusted for\r
}\r
\r
/**\r
- * Reveal all matched elements by adjusting their width and firing an\r
- * optional callback after completion.\r
+ * Reveal all matched elements by adjusting their width and firing an optional\r
+ * callback after completion.\r
*/\r
public Effects slideRight(Function... f) {\r
return slideRight(Speed.DEFAULT, f);\r
}\r
\r
/**\r
- * Reveal all matched elements by adjusting their width and firing an\r
- * optional callback after completion.\r
+ * Reveal all matched elements by adjusting their width and firing an optional\r
+ * callback after completion.\r
*/\r
public Effects slideRight(final int millisecs, Function... f) {\r
return animate("width: 'show'", millisecs, f);\r
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);
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);
* 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);
/**
* 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);
/**
* 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);
/**
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);
projects / gwtquery.git / commitdiff