Ext. FX class
For a lazy like me, the FX class is the most exciting class in the core class library. It is not the most important, but the most practical class.
I have defined some common special effect methods. It is interesting to try the following methods on your own.
Fadein ([object options]): Ext. Element
The options parameter has the following attributes:
Callback: Call method after function completion
Scope: object target
Easing: the default value of the string behavior method is easeout. The optional values are found in ext_base, but not described. The following content is found in Yahoo UI.
Easenone: constant speed
Easein: starts slowly and accelerates
Easeout: starts fast and slows down
Easeboth: Start slowly and slow down
Easeinstrong: starts to slow and accelerates, the fourth power of T
Easeoutstrong: starts fast and slows down, the fourth power of T
Easebothstrong: starts to slow and slows down, the fourth power of T
Elasticin:
Elasticout:
Elasticboth:
Backin:
Backout:
Backboth:
Bouncein:
Bounceout:
Bounceboth:
Too much. Let's get started.
Aftercls: the style of the element after the string event is completed
Duration: Number event completion time (in seconds)
Remove: After a Boolean event is completed, what elements are destroyed?
Usedisplay: Does a Boolean hidden element use the display or visibility attribute?
Afterstyle: Apply the style after the string/Object/function event is completed
Block: Boolean block?
Concurrent: Boolean sequence or simultaneous execution?
Stopfx: indicates whether the effect that matches the current effect will be stopped and removed.
Fadeout ([object options]): Ext. Element
The gradient fadeout and fadein can use a special endopacity attribute to indicate the transparency at the end.
Example: El. fadein ({Duration: 5, endopacity: 0.7 });
Frame ([String color], [number count], [object options]): Ext. Element
The border is highlighted, extended, and gradually hidden
Example: El. Frame ("ff0000", 10, {Duration: 3 })
Ghost ([string anchor], [object options]): Ext. Element
Gradually slide out of the view, anchor Definition
TL upper left corner (default)
T Center
Tr upper right corner
L center of the left boundary
Center C
R center of the right boundary
BL lower left
Center under B
Bottom right corner of BR
Example:
El. Ghost ('B ',{
Easing: 'easeout ',
Duration:. 5
Remove: false,
Usedisplay: false
});
Hasactivefx (): Boolean
Indicates whether the element has a special effect currently active.
Hasfxblock (): Boolean
Is there any special effect blocking?
Highlight ([String color], [object options]): Ext. Element
Highlight current element
Example: El. Highlight ("ffff9c ",{
ATTR: "background-color", // can be any valid CSS property (attribute) that supports a color value
Endcolor: (current color) or "ffffff ",
Easing: 'easin ',
Duration: 1
});
Pause (number seconds): Ext. Element
Pause
Puff ([object options]): Ext. Element
Blow, blow, blow a balloon, the element is getting bigger and invisible
Example: El. Puff ({
Easing: 'easeout ',
Duration:. 5,
Remove: false,
Usedisplay: false
});
Scale (number width, number height, [object options]): Ext. Element
Zoom
Example: El. Scale (
[Element's width],
[Element's height], {
Easing: 'easeout ',
Duration:. 35
});
Sequencefx ()
Special queuing Effect
Shift (Object options): Ext. Element
Displacement, and the size and transparency can be reset.
Example:
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
});
Slidein ([string anchor], [object options]): Ext. Element
Slideout ([string anchor], [object options]): Ext. Element
Slide in/out
Example: El. slidein ('T ',{
Easing: 'easeout ',
Duration:. 5
});
Stopfx (): Ext. Element
Stop Special Effects
Switchoff ([object options]): Ext. Element
Hide
Example:
El. switchoff ({
Easing: 'easin ',
Duration:. 3,
Remove: false,
Usedisplay: false
});
Syncfx (): Ext. Element
Asynchronous Effects