+++ /dev/null
- <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"><a href="../src/Fx.js" target="_blank">Fx.js</a></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>\r
-<pre>Value Description\r
------ -----------------------------\r
-tl The top left corner\r
-t The center of the top edge\r
-tr The top right corner\r
-l The center of the left edge\r
-r The center of the right edge\r
-bl The bottom left corner\r
-b The center of the bottom edge\r
-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">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-afterCls"></a>\r
- <b>afterCls</b> : String <div class="mdesc">\r
- A css class to apply after the effect </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-afterStyle"></a>\r
- <b>afterStyle</b> : String/Object/Function <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-block"></a>\r
- <b>block</b> : Boolean <div class="mdesc">\r
- Whether the effect should block other effects from queueing while it runs </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-callback"></a>\r
- <b>callback</b> : Function <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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. The Element being operated upon is passed as the first parameter. </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-concurrent"></a>\r
- <b>concurrent</b> : Boolean <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-duration"></a>\r
- <b>duration</b> : Number <div class="mdesc">\r
- The length of time (in seconds) that the effect should last </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-easing"></a>\r
- <b>easing</b> : String <div class="mdesc">\r
- A valid Easing value for the effect </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-remove"></a>\r
- <b>remove</b> : Boolean <div class="mdesc">\r
- Whether the Element should be removed from the DOM and destroyed after the effect finishes </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-scope"></a>\r
- <b>scope</b> : Object <div class="mdesc">\r
- The scope of the effect function </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-stopFx"></a>\r
- <b>stopFx</b> : Boolean <div class="mdesc">\r
- Whether subsequent effects should be stopped and removed after the current effect finishes </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="config-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-useDisplay"></a>\r
- <b>useDisplay</b> : Boolean <div class="mdesc">\r
- <div class="short">Whether to use the display CSS property instead of visibility when hiding Elements (only applies to effects that end ...</div>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- </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">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-fadeIn"></a>\r
- <b>fadeIn</b>( <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Fade an element in (from transparent to opaque). The ending opacity can be specified
-using the "endOpacity" config o...</div>\r
- <div class="long">\r
- Fade an element in (from transparent to opaque). The ending opacity can be specified
-using the "endOpacity" config option.
-Usage:\r
-<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">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-fadeOut"></a>\r
- <b>fadeOut</b>( <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Fade an element out (from opaque to transparent). The ending opacity can be specified
-using the "endOpacity" config ...</div>\r
- <div class="long">\r
- 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:\r
-<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">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-frame"></a>\r
- <b>frame</b>( <span class="optional" title="Optional">[<code>String color</code>]</span>, <span class="optional" title="Optional">[<code>Number count</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.
-Usage:\r
-// default: a single light ...</div>\r
- <div class="long">\r
- Shows a ripple of exploding, attenuating borders to draw attention to an Element.
-Usage:\r
-<pre><code><i>// <b>default</b>: a single light blue ripple</i>
-el.frame();
-
-<i>// custom: 3 red ripples lasting 3 seconds total</i>
-el.frame(<em>"ff0000"</em>, 3, { duration: 3 });
-
-<i>// common config options shown <b>with</b> default values</i>
-el.frame(<em>"C3DAF9"</em>, 1, {
- duration: 1 <i>//duration of each individual ripple.</i>
- <i>// Note: Easing is not configurable and will be ignored <b>if</b> included</i>
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>color</code> : String<div class="sub-desc">(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').</div></li><li><code>count</code> : Number<div class="sub-desc">(optional) The number of ripples to display (defaults to 1)</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-ghost"></a>\r
- <b>ghost</b>( <span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Slides the element while fading it out of view. An anchor point can be optionally passed to set the
-ending point of...</div>\r
- <div class="long">\r
- 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:
-<pre><code><i>// <b>default</b>: slide the element downward <b>while</b> fading out</i>
-el.ghost();
-
-<i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
-el.ghost(<em>'r'</em>, { duration: 2 });
-
-<i>// common config options shown <b>with</b> default values</i>
-el.ghost(<em>'b'</em>, {
- easing: <em>'easeOut'</em>,
- duration: .5,
- remove: false,
- useDisplay: false
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>anchor</code> : String<div class="sub-desc">(optional) One of the valid Fx anchor positions (defaults to bottom: 'b')</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-hasActiveFx"></a>\r
- <b>hasActiveFx</b>() : Boolean <div class="mdesc">\r
- <div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div>\r
- <div class="long">\r
- Returns true if the element has any effects actively running or queued, else returns false. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li>None.</li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Boolean</code><div class="sub-desc">True if element has active effects, else false</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-hasFxBlock"></a>\r
- <b>hasFxBlock</b>() : Boolean <div class="mdesc">\r
- <div class="short">Returns true if the element is currently blocking so that no other effect can be queued
-until this effect is finished...</div>\r
- <div class="long">\r
- 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). <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li>None.</li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Boolean</code><div class="sub-desc">True if blocking, else false</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-highlight"></a>\r
- <b>highlight</b>( <span class="optional" title="Optional">[<code>String color</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Highlights the Element by setting a color (applies to the background-color by default, but can be
-changed using the "...</div>\r
- <div class="long">\r
- 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:\r
-<pre><code><i>// <b>default</b>: highlight background to yellow</i>
-el.highlight();
-
-<i>// custom: highlight foreground text to blue <b>for</b> 2 seconds</i>
-el.highlight(<em>"0000ff"</em>, { attr: <em>'color'</em>, duration: 2 });
-
-<i>// common config options shown <b>with</b> default values</i>
-el.highlight(<em>"ffff9c"</em>, {
- attr: <em>"background-color"</em>, <i>//can be any valid CSS property (attribute) that supports a color value</i>
- endColor: (current color) or <em>"ffffff"</em>,
- easing: <em>'easeIn'</em>,
- duration: 1
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>color</code> : String<div class="sub-desc">(optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-pause"></a>\r
- <b>pause</b>( <code>Number seconds</code> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Creates a pause before any subsequent queued effects begin. If there are
-no effects queued after the pause it will h...</div>\r
- <div class="long">\r
- Creates a pause before any subsequent queued effects begin. If there are
-no effects queued after the pause it will have no effect.
-Usage:\r
-<pre><code>el.pause(1);</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>seconds</code> : Number<div class="sub-desc">The length of time to pause (in seconds)</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-puff"></a>\r
- <b>puff</b>( <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Fades the element out while slowly expanding it in all directions. When the effect is completed, the
-element will b...</div>\r
- <div class="long">\r
- 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:
-<pre><code><i>// <b>default</b></i>
-el.puff();
-
-<i>// common config options shown <b>with</b> default values</i>
-el.puff({
- easing: <em>'easeOut'</em>,
- duration: .5,
- remove: false,
- useDisplay: false
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-scale"></a>\r
- <b>scale</b>( <code>Number width</code>, <code>Number height</code>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Animates the transition of an element's dimensions from a starting height/width
-to an ending height/width.
-Usage:\r
-//...</div>\r
- <div class="long">\r
- Animates the transition of an element's dimensions from a starting height/width
-to an ending height/width.
-Usage:\r
-<pre><code><i>// change height and width to 100x100 pixels</i>
-el.scale(100, 100);
-
-<i>// common config options shown <b>with</b> default values. The height and width will <b>default</b> to</i>
-<i>// the element's existing values <b>if</b> passed as null.</i>
-el.scale(
- [element's width],
- [element's height], {
- easing: <em>'easeOut'</em>,
- duration: .35
- }
-);</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>width</code> : Number<div class="sub-desc">The new width (pass undefined to keep the original width)</div></li><li><code>height</code> : Number<div class="sub-desc">The new height (pass undefined to keep the original height)</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-sequenceFx"></a>\r
- <b>sequenceFx</b>() : Ext.Element <div class="mdesc">\r
- <div class="short">Ensures that all effects queued after sequenceFx is called on the element are
-run in sequence. This is the opposite ...</div>\r
- <div class="long">\r
- Ensures that all effects queued after sequenceFx is called on the element are
-run in sequence. This is the opposite of <a ext:cls="Ext.Fx" ext:member="syncFx" href="output/Ext.Fx.html#syncFx">syncFx</a>. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li>None.</li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-shift"></a>\r
- <b>shift</b>( <code>Object options</code> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
-Any of these prope...</div>\r
- <div class="long">\r
- 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:\r
-<pre><code><i>// slide the element horizontally to x position 200 <b>while</b> changing the height and opacity</i>
-el.shift({ x: 200, height: 50, opacity: .8 });
-
-<i>// common config options shown <b>with</b> default values.</i>
-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: <em>'easeOut'</em>,
- duration: .35
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>options</code> : Object<div class="sub-desc">Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-slideIn"></a>\r
- <b>slideIn</b>( <span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Slides the element into view. An anchor point can be optionally passed to set the point of
-origin for the slide effe...</div>\r
- <div class="long">\r
- 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:
-<pre><code><i>// <b>default</b>: slide the element <b>in</b> from the top</i>
-el.slideIn();
-
-<i>// custom: slide the element <b>in</b> from the right <b>with</b> a 2-second duration</i>
-el.slideIn(<em>'r'</em>, { duration: 2 });
-
-<i>// common config options shown <b>with</b> default values</i>
-el.slideIn(<em>'t'</em>, {
- easing: <em>'easeOut'</em>,
- duration: .5
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>anchor</code> : String<div class="sub-desc">(optional) One of the valid Fx anchor positions (defaults to top: 't')</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-slideOut"></a>\r
- <b>slideOut</b>( <span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Slides the element out of view. An anchor point can be optionally passed to set the end point
-for the slide effect. ...</div>\r
- <div class="long">\r
- 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:
-<pre><code><i>// <b>default</b>: slide the element out to the top</i>
-el.slideOut();
-
-<i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
-el.slideOut(<em>'r'</em>, { duration: 2 });
-
-<i>// common config options shown <b>with</b> default values</i>
-el.slideOut(<em>'t'</em>, {
- easing: <em>'easeOut'</em>,
- duration: .5,
- remove: false,
- useDisplay: false
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>anchor</code> : String<div class="sub-desc">(optional) One of the valid Fx anchor positions (defaults to top: 't')</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-stopFx"></a>\r
- <b>stopFx</b>() : Ext.Element <div class="mdesc">\r
- <div class="short">Stops any running effects and clears the element's internal effects queue if it contains
-any additional effects that ...</div>\r
- <div class="long">\r
- Stops any running effects and clears the element's internal effects queue if it contains
-any additional effects that haven't started yet. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li>None.</li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-switchOff"></a>\r
- <b>switchOff</b>( <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : Ext.Element <div class="mdesc">\r
- <div class="short">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
-Whe...</div>\r
- <div class="long">\r
- 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:
-<pre><code><i>// <b>default</b></i>
-el.switchOff();
-
-<i>// all config options shown <b>with</b> default values</i>
-el.switchOff({
- easing: <em>'easeIn'</em>,
- duration: .3,
- remove: false,
- useDisplay: false
-});</code></pre> <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.Fx-syncFx"></a>\r
- <b>syncFx</b>() : Ext.Element <div class="mdesc">\r
- <div class="short">Ensures that all effects queued after syncFx is called on the element are
-run concurrently. This is the opposite of ...</div>\r
- <div class="long">\r
- Ensures that all effects queued after syncFx is called on the element are
-run concurrently. This is the opposite of <a ext:cls="Ext.Fx" ext:member="sequenceFx" href="output/Ext.Fx.html#sequenceFx">sequenceFx</a>. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li>None.</li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">Fx</td>\r
- </tr>\r
- </table>
- <a id="Ext.Fx-events"></a>
- <h2>Public Events</h2>
- <div class="no-members">This class has no public events.</div>
- </div>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff