Class Roo.Fx

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:

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Fade an element out (from opaque to transparent). The ending opacity can be specified
using the "endOpacity" config option.
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:

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Shows a ripple of exploding, attenuating borders to draw attention to an Element.
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 entire animation (not each individual ripple)
    // Note: Easing is not configurable and will be ignored if included
});

Parameters:

String color

(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').

Number count

(optional) The number of ripples to display (defaults to 1)

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

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:

String anchor

(optional) One of the valid Fx anchor positions (defaults to bottom: 'b')

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Returns true if the element has any effects actively running or queued, else returns false.

Returns:

Boolean True if element has active effects, else false

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).

Returns:

Boolean True if blocking, else false

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:

String color

(optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

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:

Number seconds

The length of time to pause (in seconds)

Returns:

Roo.Element The Element

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:

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Animates the transition of an element's dimensions from a starting height/width
to an ending height/width.
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:

Number width

The new width (pass undefined to keep the original width)

Number height

The new height (pass undefined to keep the original height)

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Ensures that all effects queued after sequenceFx is called on the element are
run in sequence. This is the opposite of {link syncFx}.

Returns:

Roo.Element The Element

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:

Object options

Object literal with any of the Fx config options

Returns:

Roo.Element The Element

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:

String anchor

(optional) One of the valid Fx anchor positions (defaults to top: 't')

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

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:

String anchor

(optional) One of the valid Fx anchor positions (defaults to top: 't')

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Stops any running effects and clears the element's internal effects queue if it contains
any additional effects that haven't started yet.

Returns:

Roo.Element The Element

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:

Object options

(optional) Object literal with any of the Fx config options

Returns:

Roo.Element The Element

Ensures that all effects queued after syncFx is called on the element are
run concurrently. This is the opposite of {link sequenceFx}.

Returns:

Roo.Element The Element