[Reprint] ext core API (6)-Ext. FX

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.