A class to provide basic animation and visual effects support. Note: This class is automatically applied - * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. - * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be - * {@link Ext#enableFx included} in order for the Element effects to work.
Method Chaining
- *It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that - * they return the Element object itself as the method return value, it is not always possible to mix the two in a single - * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. - * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, - * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the - * expected results and should be done with care. Also see {@link #callback}.
Anchor Options for Motion Effects
- *Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element - * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
--Value Description ------ ----------------------------- -tl The top left corner -t The center of the top edge -tr The top right corner -l The center of the left edge -r The center of the right edge -bl The bottom left corner -b The center of the bottom edge -br The bottom right corner -- * Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options - * section below are common options that can be passed to any Fx method unless otherwise noted. - * - * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the - * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together - * and called in sequence (see note for Method Chaining above), for example:
- * el.slideIn().highlight();
- * this reference) in which the {@link #callback} function is executed. Defaults to the browser window.
- *
- * @cfg {String} easing A valid Ext.lib.Easing value for the effect:
-// default: slide the element in from the top
-el.slideIn();
-
-// custom: slide the element in from the right with a 2-second duration
-el.slideIn('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideIn('t', {
- easing: 'easeOut',
- duration: .5
-});
-
-// default: slide the element out to the top
-el.slideOut();
-
-// custom: slide the element out to the right with a 2-second duration
-el.slideOut('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideOut('t', {
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
-// default
-el.puff();
-
-// common config options shown with default values
-el.puff({
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
-// default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
- easing: 'easeIn',
- duration: .3,
- remove: false,
- useDisplay: false
-});
-
-// default: highlight background to yellow
-el.highlight();
-
-// custom: highlight foreground text to blue for 2 seconds
-el.highlight("0000ff", { attr: 'color', duration: 2 });
-
-// common config options shown with default values
-el.highlight("ffff9c", {
- attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
- endColor: (current color) or "ffffff",
- easing: 'easeIn',
- duration: 1
-});
-
-// default: a single light blue ripple
-el.frame();
-
-// custom: 3 red ripples lasting 3 seconds total
-el.frame("ff0000", 3, { duration: 3 });
-
-// common config options shown with default values
-el.frame("C3DAF9", 1, {
- duration: 1 //duration of each individual ripple.
- // Note: Easing is not configurable and will be ignored if included
-});
-
-el.pause(1);
-
-// default: fade in from opacity 0 to 100%
-el.fadeIn();
-
-// custom: fade in from opacity 0 to 75% over 2 seconds
-el.fadeIn({ endOpacity: .75, duration: 2});
-
-// common config options shown with default values
-el.fadeIn({
- endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5
-});
-
-// default: fade out from the element's current opacity to 0
-el.fadeOut();
-
-// custom: fade out from the element's current opacity to 25% over 2 seconds
-el.fadeOut({ endOpacity: .25, duration: 2});
-
-// common config options shown with default values
-el.fadeOut({
- endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
-// change height and width to 100x100 pixels
-el.scale(100, 100);
-
-// common config options shown with default values. The height and width will default to
-// the element's existing values if passed as null.
-el.scale(
- [element's width],
- [element's height], {
- easing: 'easeOut',
- duration: .35
- }
-);
-
-// slide the element horizontally to x position 200 while changing the height and opacity
-el.shift({ x: 200, height: 50, opacity: .8 });
-
-// common config options shown with default values.
-el.shift({
- width: [element's width],
- height: [element's height],
- x: [element's x position],
- y: [element's y position],
- opacity: [element's opacity],
- easing: 'easeOut',
- duration: .35
-});
-
-// default: slide the element downward while fading out
-el.ghost();
-
-// custom: slide the element out to the right with a 2-second duration
-el.ghost('r', { duration: 2 });
-
-// common config options shown with default values
-el.ghost('b', {
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-A class to provide basic animation and visual effects support. Note: This class is automatically applied + * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. + * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be + * {@link Ext#enableFx included} in order for the Element effects to work.
Method Chaining
+ *It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that + * they return the Element object itself as the method return value, it is not always possible to mix the two in a single + * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. + * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, + * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the + * expected results and should be done with care. Also see {@link #callback}.
Anchor Options for Motion Effects
+ *Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element + * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
++Value Description +----- ----------------------------- +tl The top left corner +t The center of the top edge +tr The top right corner +l The center of the left edge +r The center of the right edge +bl The bottom left corner +b The center of the bottom edge +br The bottom right corner ++ * Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options + * section below are common options that can be passed to any Fx method unless otherwise noted. + * + * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the + * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together + * and called in sequence (see note for Method Chaining above), for example:
+ * el.slideIn().highlight();
+ * this reference) in which the {@link #callback} function is executed. Defaults to the browser window.
+ *
+ * @cfg {String} easing A valid Ext.lib.Easing value for the effect:
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+ easing: 'easeOut',
+ duration: .5
+});
+
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+ easing: 'easeIn',
+ duration: .3,
+ remove: false,
+ useDisplay: false
+});
+
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight("0000ff", { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight("ffff9c", {
+ attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
+ endColor: (current color) or "ffffff",
+ easing: 'easeIn',
+ duration: 1
+});
+
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame("ff0000", 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame("C3DAF9", 1, {
+ duration: 1 //duration of each individual ripple.
+ // Note: Easing is not configurable and will be ignored if included
+});
+
+el.pause(1);
+
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+ endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5
+});
+
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+ endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values. The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+ [element's width],
+ [element's height], {
+ easing: 'easeOut',
+ duration: .35
+ }
+);
+
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+ width: [element's width],
+ height: [element's height],
+ x: [element's x position],
+ y: [element's y position],
+ opacity: [element's opacity],
+ easing: 'easeOut',
+ duration: .35
+});
+
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
+