- |
-
-
- fadeIn( [Object options ] ) : Ext.Element
- Fade an element in (from transparent to opaque). The ending opacity can be specified
-using the "endOpacity" config o...
-
- Fade an element in (from transparent to opaque). The ending opacity can be specified
-using the "endOpacity" config option.
+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. Config Options|
| afterCls : String A css class to apply after the effect | Fx | | afterStyle : String/Object/FunctionA style specification string, e.g. "width:100px", or an object
+in the form {width:"100px"}, or a function which retu... A style specification string, e.g. "width:100px", or an object
+in the form {width:"100px"}, or a function which returns such a specification that will be applied to the
+Element after the effect finishes. | Fx | | block : Boolean Whether the effect should block other effects from queueing while it runs | Fx | | callback : FunctionA function called when the effect is finished. Note that effects are queued internally by the
+Fx class, so a callba... 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();
+The callback is intended for any additional code that should run once a particular effect has completed. The Element
+being operated upon is passed as the first parameter. | Fx | | concurrent : BooleanWhether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they ru... Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence | Fx | | duration : Number The length of time (in seconds) that the effect should last | Fx | | easing : StringA valid Ext.lib.Easing value for the effect:<div class="mdetail-params">
+backBoth
+backIn
+backOut
+bounceBoth
+boun... A valid Ext.lib.Easing value for the effect:
+- backBoth
+- backIn
+- backOut
+- bounceBoth
+- bounceIn
+- bounceOut
+- easeBoth
+- easeBothStrong
+- easeIn
+- easeInStrong
+- easeNone
+- easeOut
+- easeOutStrong
+- elasticBoth
+- elasticIn
+- elasticOut
+ | Fx | | endOpacity : NumberOnly applicable for fadeIn or fadeOut, a number between
+ 0 and 1 inclusive to configure the ending opacity value. | Fx | | remove : Boolean Whether the Element should be removed from the DOM and destroyed after the effect finishes | Fx | | scope : Object | Fx | | stopFx : BooleanWhether preceding effects should be stopped and removed before running current effect (only applies to non blocking e... Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects) | Fx | | useDisplay : BooleanWhether to use the display CSS property instead of visibility when hiding Elements (only applies to
+effects that en... Whether to use the display CSS property instead of visibility when hiding Elements (only applies to
+effects that end with the element being visually hidden, ignored otherwise) | Fx |
Public PropertiesThis class has no public properties. Public Methods|
| fadeIn( [Object options ] )
+ :
+ Ext.ElementFade an element in (from transparent to opaque). The ending opacity can be specified
+using the endOpacity config op... Fade an element in (from transparent to opaque). The ending opacity can be specified
+using the endOpacity config option.
Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- fadeOut( [Object options ] ) : Ext.Element
- Fade an element out (from opaque to transparent). The ending opacity can be specified
-using the "endOpacity" config ...
-
- Fade an element out (from opaque to transparent). The ending opacity can be specified
-using the "endOpacity" config option. Note that IE may require useDisplay:true in order
-to redisplay correctly.
+ // 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
+});
| Fx | | fadeOut( [Object options ] )
+ :
+ Ext.ElementFade an element out (from opaque to transparent). The ending opacity can be specified
+using the endOpacity config o... Fade an element out (from opaque to transparent). The ending opacity can be specified
+using the endOpacity config option. Note that IE may require
+ useDisplay:true in order to redisplay correctly.
Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- frame( [String color ], [Number count ], [Object options ] ) : Ext.Element
- Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+ // 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
+});
| Fx | | frame( [String color ], [Number count ], [Object options ] )
+ :
+ Ext.ElementShows a ripple of exploding, attenuating borders to draw attention to an Element.
+Usage:
+// default: a single light... Shows a ripple of exploding, attenuating borders to draw attention to an Element.
Usage:
-// default: a single light ...
-
- Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+ // 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
+});
Parameters:color : String(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9'). count : Number(optional) The number of ripples to display (defaults to 1) options : Object(optional) Object literal with any of the Fx config options Returns: | Fx | | ghost( [String anchor ], [Object options ] )
+ :
+ Ext.ElementSlides the element while fading it out of view. An anchor point can be optionally passed to set the
+ending point o... Slides the element while fading it out of view. An anchor point can be optionally passed to set the
+ending point of the effect.
Usage:
- // 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
-});
- Parameters:
- color : String(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9'). count : Number(optional) The number of ripples to display (defaults to 1) options : Object(optional) Object literal with any of the Fx config options
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- ghost( [String anchor ], [Object options ] ) : Ext.Element
- Slides the element while fading it out of view. An anchor point can be optionally passed to set the
-ending point of...
-
- Slides the element while fading it out of view. An anchor point can be optionally passed to set the
-ending point of the effect.
-Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- hasActiveFx() : Boolean
- Returns true if the element has any effects actively running or queued, else returns false.
-
- Returns true if the element has any effects actively running or queued, else returns false.
- Parameters:
-
- Returns:
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- hasFxBlock() : Boolean
- Returns true if the element is currently blocking so that no other effect can be queued
-until this effect is finished...
-
- Returns true if the element is currently blocking so that no other effect can be queued
-until this effect is finished, else returns false if blocking is not set. This is commonly
-used to ensure that an effect initiated by a user action runs to completion prior to the
-same effect being restarted (e.g., firing only one effect even if the user clicks several times).
- Parameters:
-
- Returns:
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- highlight( [String color ], [Object options ] ) : Ext.Element
- Highlights the Element by setting a color (applies to the background-color by default, but can be
-changed using the "...
-
- Highlights the Element by setting a color (applies to the background-color by default, but can be
-changed using the "attr" config option) and then fading back to the original color. If no original
-color is available, you should provide the "endColor" config option which will be cleared after the animation.
+ // 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
+});
| Fx | | hasActiveFx()
+ :
+ BooleanReturns true if the element has any effects actively running or queued, else returns false. Returns true if the element has any effects actively running or queued, else returns false. | Fx | | hasFxBlock()
+ :
+ BooleanReturns true if the element is currently blocking so that no other effect can be queued
+until this effect is finishe... Returns true if the element is currently blocking so that no other effect can be queued
+until this effect is finished, else returns false if blocking is not set. This is commonly
+used to ensure that an effect initiated by a user action runs to completion prior to the
+same effect being restarted (e.g., firing only one effect even if the user clicks several times). | Fx | | highlight( [String color ], [Object options ] )
+ :
+ Ext.ElementHighlights the Element by setting a color (applies to the background-color by default, but can be
+changed using the ... Highlights the Element by setting a color (applies to the background-color by default, but can be
+changed using the "attr" config option) and then fading back to the original color. If no original
+color is available, you should provide the "endColor" config option which will be cleared after the animation.
Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- pause( Number seconds ) : Ext.Element
- Creates a pause before any subsequent queued effects begin. If there are
-no effects queued after the pause it will h...
-
- Creates a pause before any subsequent queued effects begin. If there are
-no effects queued after the pause it will have no effect.
+ // 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
+});
| Fx | | pause( Number seconds )
+ :
+ Ext.ElementCreates a pause before any subsequent queued effects begin. If there are
+no effects queued after the pause it will ... Creates a pause before any subsequent queued effects begin. If there are
+no effects queued after the pause it will have no effect.
Usage:
- el.pause(1);
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- puff( [Object options ] ) : Ext.Element
- Fades the element out while slowly expanding it in all directions. When the effect is completed, the
-element will b...
-
- Fades the element out while slowly expanding it in all directions. When the effect is completed, the
-element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
-The element must be removed from the DOM using the 'remove' config option if desired.
-Usage:
- // default
-el.puff();
-
-// common config options shown with default values
-el.puff({
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- scale( Number width , Number height , [Object options ] ) : Ext.Element
- Animates the transition of an element's dimensions from a starting height/width
-to an ending height/width.
+ el.pause(1);
| Fx | | puff( [Object options ] )
+ :
+ Ext.ElementFades the element out while slowly expanding it in all directions. When the effect is completed, the
+element will ... Fades the element out while slowly expanding it in all directions. When the effect is completed, the
+element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
+The element must be removed from the DOM using the 'remove' config option if desired.
Usage:
-//...
-
- Animates the transition of an element's dimensions from a starting height/width
-to an ending height/width.
+ // default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+ easing: 'easeOut',
+ duration: .5,
+ remove: false,
+ useDisplay: false
+});
| Fx | | scale( Number width , Number height , [Object options ] )
+ :
+ Ext.ElementAnimates the transition of an element's dimensions from a starting height/width
+to an ending height/width. This met... Animates the transition of an element's dimensions from a starting height/width
+to an ending height/width. This method is a convenience implementation of shift.
Usage:
- // 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
- }
-);
- Parameters:
- width : NumberThe new width (pass undefined to keep the original width) height : NumberThe new height (pass undefined to keep the original height) options : Object(optional) Object literal with any of the Fx config options
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- sequenceFx() : Ext.Element
- Ensures that all effects queued after sequenceFx is called on the element are
-run in sequence. This is the opposite ...
-
- Ensures that all effects queued after sequenceFx is called on the element are
-run in sequence. This is the opposite of syncFx.
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- shift( Object options ) : Ext.Element
- Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
-Any of these prope...
-
- Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
-Any of these properties not specified in the config object will not be changed. This effect
-requires that at least one new dimension, position or opacity setting must be passed in on
-the config object in order for the function to have any effect.
+ // 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
+ }
+);
Parameters:width : NumberThe new width (pass undefined to keep the original width) height : NumberThe new height (pass undefined to keep the original height) options : Object(optional) Object literal with any of the Fx config options Returns: | Fx | | sequenceFx()
+ :
+ Ext.ElementEnsures that all effects queued after sequenceFx is called on the element are
+run in sequence. This is the opposite... Ensures that all effects queued after sequenceFx is called on the element are
+run in sequence. This is the opposite of syncFx. | Fx | | shift( Object options )
+ :
+ Ext.ElementAnimates the transition of any combination of an element's dimensions, xy position and/or opacity.
+Any of these prop... Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+Any of these properties not specified in the config object will not be changed. This effect
+requires that at least one new dimension, position or opacity setting must be passed in on
+the config object in order for the function to have any effect.
Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- slideIn( [String anchor ], [Object options ] ) : Ext.Element
- Slides the element into view. An anchor point can be optionally passed to set the point of
-origin for the slide effe...
-
- Slides the element into view. An anchor point can be optionally passed to set the point of
-origin for the slide effect. This function automatically handles wrapping the element with
-a fixed-size container if needed. See the Fx class overview for valid anchor point options.
-Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- slideOut( [String anchor ], [Object options ] ) : Ext.Element
- Slides the element out of view. An anchor point can be optionally passed to set the end point
-for the slide effect. ...
-
- Slides the element out of view. An anchor point can be optionally passed to set the end point
-for the slide effect. When the effect is completed, the element will be hidden (visibility =
-'hidden') but block elements will still take up space in the document. The element must be removed
-from the DOM using the 'remove' config option if desired. This function automatically handles
-wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
-Usage:
- // 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
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- stopFx() : Ext.Element
- Stops any running effects and clears the element's internal effects queue if it contains
-any additional effects that ...
-
- Stops any running effects and clears the element's internal effects queue if it contains
-any additional effects that haven't started yet.
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- switchOff( [Object options ] ) : Ext.Element
- Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
-Whe...
-
- Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
-When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
-take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
-Usage:
- // default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
- easing: 'easeIn',
- duration: .3,
- remove: false,
- useDisplay: false
-});
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
- |
-
-
- syncFx() : Ext.Element
- Ensures that all effects queued after syncFx is called on the element are
-run concurrently. This is the opposite of ...
-
- Ensures that all effects queued after syncFx is called on the element are
-run concurrently. This is the opposite of sequenceFx.
- Parameters:
-
- Returns:
-
- Ext.Element The Element
-
-
-
-
- |
- Fx |
-
-
-
- Public Events
- This class has no public events.
-
\ No newline at end of file
+// 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
+});
| Fx |