ext.fx.html.svn-base

PHP 知识管理系统（基于树结构的知识管理系统）, 英文原版的PHP源码。

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.Fx-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.Fx-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.Fx-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.Fx-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.Fx"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
        </div>
                <h1>Class Ext.Fx</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
            <tr><td class="label">Defined In:</td><td class="hd-info">Fx.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">Fx</td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
                    </table>
        <div class="description">
            <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
to the <a ext:cls="Ext.Element" href="output/Ext.Element.html">Ext.Element</a> interface when included, so all effects calls should be performed via Element.
Conversely, since the effects are not actually defined in Element, Ext.Fx <b>must</b> be included in order for the 
Element effects to work.</p><br/>
<p>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.</p><br/>
<p>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:</p>
<pre>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</pre>
<b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
below are common options that can be passed to any Fx method.</b>        </div>
        
        <div class="hr"></div>
                <a id="Ext.Fx-configs"></a>
        <h2>Config Options</h2>
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Config Options</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-afterCls"></a>
            <b>afterCls</b> : String            <div class="mdesc">
                            A css class to apply after the effect                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-afterStyle"></a>
            <b>afterStyle</b> : String/Object/Function            <div class="mdesc">
                        <div class="short">A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or a function which retur...</div>
            <div class="long">
                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            </div>
                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-block"></a>
            <b>block</b> : Boolean            <div class="mdesc">
                            Whether the effect should block other effects from queueing while it runs                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-callback"></a>
            <b>callback</b> : Function            <div class="mdesc">
                        <div class="short">A function called when the effect is finished. Note that effects are queued internally by the Fx class, so do not nee...</div>
            <div class="long">
                A function called when the effect is finished. Note that effects are queued internally by the Fx class, so do not need to use the callback parameter to specify another effect -- effects can simply be chained together and called in sequence (e.g., el.slideIn().highlight();). The callback is intended for any additional code that should run once a particular effect has completed.            </div>
                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-concurrent"></a>
            <b>concurrent</b> : Boolean            <div class="mdesc">
                        <div class="short">Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they ru...</div>
            <div class="long">
                Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence            </div>
                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-duration"></a>
            <b>duration</b> : Number            <div class="mdesc">
                            The length of time (in seconds) that the effect should last                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-easing"></a>
            <b>easing</b> : String            <div class="mdesc">
                            A valid Easing value for the effect                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-remove"></a>
            <b>remove</b> : Boolean            <div class="mdesc">
                            Whether the Element should be removed from the DOM and destroyed after the effect finishes                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-scope"></a>
            <b>scope</b> : Object            <div class="mdesc">
                            The scope of the effect function                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-stopFx"></a>
            <b>stopFx</b> : Boolean            <div class="mdesc">
                            Whether subsequent effects should be stopped and removed after the current effect finishes                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="config-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-useDisplay"></a>
            <b>useDisplay</b> : Boolean            <div class="mdesc">
                        <div class="short">Whether to use the display CSS property instead of visibility when hiding Elements (only applies to effects that end ...</div>
            <div class="long">
                Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to effects that end with the element being visually hidden, ignored otherwise)            </div>
                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
            </table>
                <a id="Ext.Fx-props"></a>
        <h2>Public Properties</h2>
        <div class="no-members">This class has no public properties.</div>        <a id="Ext.Fx-methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-fadeIn"></a>
            <b>fadeIn</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">
                        <div class="short">Fade an element in (from transparent to opaque).  The ending opacity can be specified
using the "endOpacity" config o...</div>
            <div class="long">
                Fade an element in (from transparent to opaque).  The ending opacity can be specified
using the "endOpacity" config option.
Usage:
<pre><code><i>// <b>default</b>: fade <b>in</b> from opacity 0 to 100%</i>
el.fadeIn();

<i>// custom: fade <b>in</b> from opacity 0 to 75% over 2 seconds</i>
el.fadeIn({ endOpacity: .75, duration: 2});

<i>// common config options shown <b>with</b> default values</i>
el.fadeIn({
    endOpacity: 1, <i>//can be any value between 0 and 1 (e.g. .5)</i>
    easing: <em>'easeOut'</em>,
    duration: .5
});</code></pre>    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">Fx</td>
    </tr>
        <tr class="method-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.Fx-fadeOut"></a>
            <b>fadeOut</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">
                        <div class="short">Fade an element out (from opaque to transparent).  The ending opacity can be specified
using the "endOpacity" config ...</div>
            <div class="long">
                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:
<pre><code><i>// <b>default</b>: fade out from the element's current opacity to 0</i>
el.fadeOut();

<i>// custom: fade out from the element's current opacity to 25% over 2 seconds</i>
el.fadeOut({ endOpacity: .25, duration: 2});

<i>// common config options shown <b>with</b> default values</i>
el.fadeOut({
    endOpacity: 0, <i>//can be any value between 0 and 1 (e.g. .5)</i>
    easing: <em>'easeOut'</em>,
    duration: .5,
    remove: false,
    useDisplay: false
});</code></pre>    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>