docs/output/Ext.Fx.html

   1 <div class="body-wrap" xmlns:ext="http://www.extjs.com"><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>&#13;<a class="inner-link" href="#Ext.Fx-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.Fx-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.Fx-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.Fx"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><h1>Class <a href="source/Fx.html#cls-Ext.Fx">Ext.Fx</a></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="source/Fx.html#cls-Ext.Fx">Fx.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Fx.html#cls-Ext.Fx">Fx</a></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
   2 to the <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a> interface when included, so all effects calls should be performed via <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a>.
   3 Conversely, since the effects are not actually defined in <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a>, Ext.Fx <b>must</b> be
   4 <a href="output/Ext.html#Ext-enableFx" ext:member="enableFx" ext:cls="Ext">included</a> in order for the Element effects to work.</p><br/>
   5 <p><b><u>Method Chaining</u></b></p>
   6 <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
   7 they return the Element object itself as the method return value, it is not always possible to mix the two in a single
   8 method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
   9 Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
  10 while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
  11 expected results and should be done with care.  Also see <tt><a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a></tt>.</p><br/>
  12 <p><b><u>Anchor Options for Motion Effects</u></b></p>
  13 <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
  14 that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
  15 <pre>
  16 Value  Description
  17 -----  -----------------------------
  18 tl     The top left corner
  19 t      The center of the top edge
  20 tr     The top right corner
  21 l      The center of the left edge
  22 r      The center of the right edge
  23 bl     The bottom left corner
  24 b      The center of the bottom edge
  25 br     The bottom right corner
  26 </pre>
  27 <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options
  28 section below are common options that can be passed to any Fx method unless otherwise noted.</b></div><div class="hr"></div><a id="Ext.Fx-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-afterCls"></a><b><a href="source/Fx.html#cfg-Ext.Fx-afterCls">afterCls</a></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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-afterStyle"></a><b><a href="source/Fx.html#cfg-Ext.Fx-afterStyle">afterStyle</a></b> : String/Object/Function<div class="mdesc"><div class="short">A style specification string, e.g. "width:100px", or an object
  29 in the form {width:"100px"}, or a function which retur...</div><div class="long">A style specification string, e.g. <tt>"width:100px"</tt>, or an object
  30 in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
  31 Element after the effect finishes.</div></div></td><td class="msource">Fx</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-block"></a><b><a href="source/Fx.html#cfg-Ext.Fx-block">block</a></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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-callback"></a><b><a href="source/Fx.html#cfg-Ext.Fx-callback">callback</a></b> : Function<div class="mdesc"><div class="short">A function called when the effect is finished.  Note that effects are queued internally by the
  32 Fx class, so a callbac...</div><div class="long">A function called when the effect is finished.  Note that effects are queued internally by the
  33 Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
  34 and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>el.slideIn().highlight();</code></pre>
  35 The callback is intended for any additional code that should run once a particular effect has completed. The Element
  36 being operated upon is passed as the first parameter.</div></div></td><td class="msource">Fx</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-concurrent"></a><b><a href="source/Fx.html#cfg-Ext.Fx-concurrent">concurrent</a></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  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-duration"></a><b><a href="source/Fx.html#cfg-Ext.Fx-duration">duration</a></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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-easing"></a><b><a href="source/Fx.html#cfg-Ext.Fx-easing">easing</a></b> : String<div class="mdesc"><div class="short">A valid Ext.lib.Easing value for the effect:&lt;div class="mdetail-params"&gt;
  37 backBoth
  38 backIn
  39 backOut
  40 bounceBoth
  41 bounceIn
  42 ...</div><div class="long">A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
  43 <li><b><tt>backBoth</tt></b></li>
  44 <li><b><tt>backIn</tt></b></li>
  45 <li><b><tt>backOut</tt></b></li>
  46 <li><b><tt>bounceBoth</tt></b></li>
  47 <li><b><tt>bounceIn</tt></b></li>
  48 <li><b><tt>bounceOut</tt></b></li>
  49 <li><b><tt>easeBoth</tt></b></li>
  50 <li><b><tt>easeBothStrong</tt></b></li>
  51 <li><b><tt>easeIn</tt></b></li>
  52 <li><b><tt>easeInStrong</tt></b></li>
  53 <li><b><tt>easeNone</tt></b></li>
  54 <li><b><tt>easeOut</tt></b></li>
  55 <li><b><tt>easeOutStrong</tt></b></li>
  56 <li><b><tt>elasticBoth</tt></b></li>
  57 <li><b><tt>elasticIn</tt></b></li>
  58 <li><b><tt>elasticOut</tt></b></li>
  59 </ul></div></div></div></td><td class="msource">Fx</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-endOpacity"></a><b><a href="source/Fx.html#cfg-Ext.Fx-endOpacity">endOpacity</a></b> : Number<div class="mdesc">Only applicable for <a href="output/Ext.Fx.html#Ext.Fx-fadeIn" ext:member="fadeIn" ext:cls="Ext.Fx">fadeIn</a> or <a href="output/Ext.Fx.html#Ext.Fx-fadeOut" ext:member="fadeOut" ext:cls="Ext.Fx">fadeOut</a>, a number between
  60 <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.</div></td><td class="msource">Fx</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-remove"></a><b><a href="source/Fx.html#cfg-Ext.Fx-remove">remove</a></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 href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-scope"></a><b><a href="source/Fx.html#cfg-Ext.Fx-scope">scope</a></b> : Object<div class="mdesc">The scope (<code>this</code> reference) in which the <tt><a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a></tt> function is executed. Defaults to the browser window.</div></td><td class="msource">Fx</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-stopFx"></a><b><a href="source/Fx.html#cfg-Ext.Fx-stopFx">stopFx</a></b> : Boolean<div class="mdesc"><div class="short">Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking e...</div><div class="long">Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)</div></div></td><td class="msource">Fx</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-useDisplay"></a><b><a href="source/Fx.html#cfg-Ext.Fx-useDisplay">useDisplay</a></b> : Boolean<div class="mdesc"><div class="short">Whether to use the display CSS property instead of visibility when hiding Elements (only applies to
  61 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
  62 effects that end with the element being visually hidden, ignored otherwise)</div></div></td><td class="msource">Fx</td></tr></tbody></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"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-fadeIn"></a><b><a href="source/Fx.html#method-Ext.Fx-fadeIn">fadeIn</a></b>(&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
  63     :
  64                                         Ext.Element<div class="mdesc"><div class="short">Fade an element in (from transparent to opaque).  The ending opacity can be specified
  65 using the endOpacity config opt...</div><div class="long">Fade an element in (from transparent to opaque).  The ending opacity can be specified
  66 using the <tt><a href="output/Ext.Fx.html#Ext.Fx-endOpacity" ext:member="endOpacity" ext:cls="Ext.Fx">endOpacity</a></tt> config option.
  67 Usage:
  68 <pre><code><i>// <b>default</b>: fade <b>in</b> from opacity 0 to 100%</i>
  69 el.fadeIn();
  70
  71 <i>// custom: fade <b>in</b> from opacity 0 to 75% over 2 seconds</i>
  72 el.fadeIn({ endOpacity: .75, duration: 2});
  73
  74 <i>// common config options shown <b>with</b> <b>default</b> values</i>
  75 el.fadeIn({
  76     endOpacity: 1, <i>//can be any value between 0 and 1 (e.g. .5)</i>
  77     easing: <em>'easeOut'</em>,
  78     duration: .5
  79 });</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-fadeOut"></a><b><a href="source/Fx.html#method-Ext.Fx-fadeOut">fadeOut</a></b>(&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
  80     :
  81                                         Ext.Element<div class="mdesc"><div class="short">Fade an element out (from opaque to transparent).  The ending opacity can be specified
  82 using the endOpacity config op...</div><div class="long">Fade an element out (from opaque to transparent).  The ending opacity can be specified
  83 using the <tt><a href="output/Ext.Fx.html#Ext.Fx-endOpacity" ext:member="endOpacity" ext:cls="Ext.Fx">endOpacity</a></tt> config option.  Note that IE may require
  84 <tt><a href="output/Ext.Fx.html#Ext.Fx-useDisplay" ext:member="useDisplay" ext:cls="Ext.Fx">useDisplay</a>:true</tt> in order to redisplay correctly.
  85 Usage:
  86 <pre><code><i>// <b>default</b>: fade out from the element<em>'s current opacity to 0</i>
  87 el.fadeOut();
  88
  89 <i>// custom: fade out from the element'</em>s current opacity to 25% over 2 seconds</i>
  90 el.fadeOut({ endOpacity: .25, duration: 2});
  91
  92 <i>// common config options shown <b>with</b> <b>default</b> values</i>
  93 el.fadeOut({
  94     endOpacity: 0, <i>//can be any value between 0 and 1 (e.g. .5)</i>
  95     easing: <em>'easeOut'</em>,
  96     duration: .5,
  97     remove: false,
  98     useDisplay: false
  99 });</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-frame"></a><b><a href="source/Fx.html#method-Ext.Fx-frame">frame</a></b>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;color</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Number&nbsp;count</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 100     :
 101                                         Ext.Element<div class="mdesc"><div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.
 102 Usage:
 103 // default: a single light b...</div><div class="long">Shows a ripple of exploding, attenuating borders to draw attention to an Element.
 104 Usage:
 105 <pre><code><i>// <b>default</b>: a single light blue ripple</i>
 106 el.frame();
 107
 108 <i>// custom: 3 red ripples lasting 3 seconds total</i>
 109 el.frame(<em>"ff0000"</em>, 3, { duration: 3 });
 110
 111 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 112 el.frame(<em>"C3DAF9"</em>, 1, {
 113     duration: 1 <i>//duration of each individual ripple.</i>
 114     <i>// Note: Easing is not configurable and will be ignored <b>if</b> included</i>
 115 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-ghost"></a><b><a href="source/Fx.html#method-Ext.Fx-ghost">ghost</a></b>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;anchor</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 116     :
 117                                         Ext.Element<div class="mdesc"><div class="short">Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
 118 ending point of...</div><div class="long">Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
 119 ending point of the effect.
 120 Usage:
 121 <pre><code><i>// <b>default</b>: slide the element downward <b>while</b> fading out</i>
 122 el.ghost();
 123
 124 <i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
 125 el.ghost(<em>'r'</em>, { duration: 2 });
 126
 127 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 128 el.ghost(<em>'b'</em>, {
 129     easing: <em>'easeOut'</em>,
 130     duration: .5,
 131     remove: false,
 132     useDisplay: false
 133 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-hasActiveFx"></a><b><a href="source/Fx.html#method-Ext.Fx-hasActiveFx">hasActiveFx</a></b>()
 134     :
 135                                         Boolean<div class="mdesc"><div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div><div class="long">Returns true if the element has any effects actively running or queued, else returns false.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if element has active effects, else false</div></li></ul></div></div></div></td><td class="msource">Fx</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-hasFxBlock"></a><b><a href="source/Fx.html#method-Ext.Fx-hasFxBlock">hasFxBlock</a></b>()
 136     :
 137                                         Boolean<div class="mdesc"><div class="short">Returns true if the element is currently blocking so that no other effect can be queued
 138 until this effect is finished...</div><div class="long">Returns true if the element is currently blocking so that no other effect can be queued
 139 until this effect is finished, else returns false if blocking is not set.  This is commonly
 140 used to ensure that an effect initiated by a user action runs to completion prior to the
 141 same effect being restarted (e.g., firing only one effect even if the user clicks several times).<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if blocking, else false</div></li></ul></div></div></div></td><td class="msource">Fx</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-highlight"></a><b><a href="source/Fx.html#method-Ext.Fx-highlight">highlight</a></b>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;color</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 142     :
 143                                         Ext.Element<div class="mdesc"><div class="short">Highlights the Element by setting a color (applies to the background-color by default, but can be
 144 changed using the "...</div><div class="long">Highlights the Element by setting a color (applies to the background-color by default, but can be
 145 changed using the "attr" config option) and then fading back to the original color. If no original
 146 color is available, you should provide the "endColor" config option which will be cleared after the animation.
 147 Usage:
 148 <pre><code><i>// <b>default</b>: highlight background to yellow</i>
 149 el.highlight();
 150
 151 <i>// custom: highlight foreground text to blue <b>for</b> 2 seconds</i>
 152 el.highlight(<em>"0000ff"</em>, { attr: <em>'color'</em>, duration: 2 });
 153
 154 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 155 el.highlight(<em>"ffff9c"</em>, {
 156     attr: <em>"background-color"</em>, <i>//can be any valid CSS property (attribute) that supports a color value</i>
 157     endColor: (current color) or <em>"ffffff"</em>,
 158     easing: <em>'easeIn'</em>,
 159     duration: 1
 160 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-pause"></a><b><a href="source/Fx.html#method-Ext.Fx-pause">pause</a></b>(&nbsp;<code>Number&nbsp;seconds</code>&nbsp;)
 161     :
 162                                         Ext.Element<div class="mdesc"><div class="short">Creates a pause before any subsequent queued effects begin.  If there are
 163 no effects queued after the pause it will h...</div><div class="long">Creates a pause before any subsequent queued effects begin.  If there are
 164 no effects queued after the pause it will have no effect.
 165 Usage:
 166 <pre><code>el.pause(1);</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>seconds</code> : Number<div class="sub-desc">The length of time to pause (in seconds)</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-puff"></a><b><a href="source/Fx.html#method-Ext.Fx-puff">puff</a></b>(&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 167     :
 168                                         Ext.Element<div class="mdesc"><div class="short">Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
 169 element will b...</div><div class="long">Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
 170 element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
 171 The element must be removed from the DOM using the 'remove' config option if desired.
 172 Usage:
 173 <pre><code><i>// <b>default</b></i>
 174 el.puff();
 175
 176 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 177 el.puff({
 178     easing: <em>'easeOut'</em>,
 179     duration: .5,
 180     remove: false,
 181     useDisplay: false
 182 });</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-scale"></a><b><a href="source/Fx.html#method-Ext.Fx-scale">scale</a></b>(&nbsp;<code>Number&nbsp;width</code>,&nbsp;<code>Number&nbsp;height</code>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 183     :
 184                                         Ext.Element<div class="mdesc"><div class="short">Animates the transition of an element's dimensions from a starting height/width
 185 to an ending height/width.  This meth...</div><div class="long">Animates the transition of an element's dimensions from a starting height/width
 186 to an ending height/width.  This method is a convenience implementation of <a href="output/shift.html" ext:cls="shift">shift</a>.
 187 Usage:
 188 <pre><code><i>// change height and width to 100x100 pixels</i>
 189 el.scale(100, 100);
 190
 191 <i>// common config options shown <b>with</b> <b>default</b> values.  The height and width will <b>default</b> to</i>
 192 <i>// the element&#39;s existing values <b>if</b> passed as null.</i>
 193 el.scale(
 194     [element&#39;s width],
 195     [element&#39;s height], {
 196         easing: <em>'easeOut'</em>,
 197         duration: .35
 198     }
 199 );</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-sequenceFx"></a><b><a href="source/Fx.html#method-Ext.Fx-sequenceFx">sequenceFx</a></b>()
 200     :
 201                                         Ext.Element<div class="mdesc"><div class="short">Ensures that all effects queued after sequenceFx is called on the element are
 202 run in sequence.  This is the opposite ...</div><div class="long">Ensures that all effects queued after sequenceFx is called on the element are
 203 run in sequence.  This is the opposite of <a href="output/Ext.Fx.html#Ext.Fx-syncFx" ext:member="syncFx" ext:cls="Ext.Fx">syncFx</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-shift"></a><b><a href="source/Fx.html#method-Ext.Fx-shift">shift</a></b>(&nbsp;<code>Object&nbsp;options</code>&nbsp;)
 204     :
 205                                         Ext.Element<div class="mdesc"><div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
 206 Any of these prope...</div><div class="long">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
 207 Any of these properties not specified in the config object will not be changed.  This effect
 208 requires that at least one new dimension, position or opacity setting must be passed in on
 209 the config object in order for the function to have any effect.
 210 Usage:
 211 <pre><code><i>// slide the element horizontally to x position 200 <b>while</b> changing the height and opacity</i>
 212 el.shift({ x: 200, height: 50, opacity: .8 });
 213
 214 <i>// common config options shown <b>with</b> <b>default</b> values.</i>
 215 el.shift({
 216     width: [element&#39;s width],
 217     height: [element&#39;s height],
 218     x: [element&#39;s x position],
 219     y: [element&#39;s y position],
 220     opacity: [element&#39;s opacity],
 221     easing: <em>'easeOut'</em>,
 222     duration: .35
 223 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>options</code> : Object<div class="sub-desc">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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-slideIn"></a><b><a href="source/Fx.html#method-Ext.Fx-slideIn">slideIn</a></b>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;anchor</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 224     :
 225                                         Ext.Element<div class="mdesc"><div class="short">Slides the element into view.  An anchor point can be optionally passed to set the point of
 226 origin for the slide effe...</div><div class="long">Slides the element into view.  An anchor point can be optionally passed to set the point of
 227 origin for the slide effect.  This function automatically handles wrapping the element with
 228 a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 229 Usage:
 230 <pre><code><i>// <b>default</b>: slide the element <b>in</b> from the top</i>
 231 el.slideIn();
 232
 233 <i>// custom: slide the element <b>in</b> from the right <b>with</b> a 2-second duration</i>
 234 el.slideIn(<em>'r'</em>, { duration: 2 });
 235
 236 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 237 el.slideIn(<em>'t'</em>, {
 238     easing: <em>'easeOut'</em>,
 239     duration: .5
 240 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-slideOut"></a><b><a href="source/Fx.html#method-Ext.Fx-slideOut">slideOut</a></b>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;anchor</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 241     :
 242                                         Ext.Element<div class="mdesc"><div class="short">Slides the element out of view.  An anchor point can be optionally passed to set the end point
 243 for the slide effect. ...</div><div class="long">Slides the element out of view.  An anchor point can be optionally passed to set the end point
 244 for the slide effect.  When the effect is completed, the element will be hidden (visibility =
 245 'hidden') but block elements will still take up space in the document.  The element must be removed
 246 from the DOM using the 'remove' config option if desired.  This function automatically handles
 247 wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 248 Usage:
 249 <pre><code><i>// <b>default</b>: slide the element out to the top</i>
 250 el.slideOut();
 251
 252 <i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
 253 el.slideOut(<em>'r'</em>, { duration: 2 });
 254
 255 <i>// common config options shown <b>with</b> <b>default</b> values</i>
 256 el.slideOut(<em>'t'</em>, {
 257     easing: <em>'easeOut'</em>,
 258     duration: .5,
 259     remove: false,
 260     useDisplay: false
 261 });</code></pre><div class="mdetail-params"><strong>Parameters:</strong><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><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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-stopFx"></a><b><a href="source/Fx.html#method-Ext.Fx-stopFx">stopFx</a></b>()
 262     :
 263                                         Ext.Element<div class="mdesc"><div class="short">Stops any running effects and clears the element's internal effects queue if it contains
 264 any additional effects that ...</div><div class="long">Stops any running effects and clears the element's internal effects queue if it contains
 265 any additional effects that haven't started yet.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-switchOff"></a><b><a href="source/Fx.html#method-Ext.Fx-switchOff">switchOff</a></b>(&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
 266     :
 267                                         Ext.Element<div class="mdesc"><div class="short">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
 268 Whe...</div><div class="long">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
 269 When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
 270 take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
 271 Usage:
 272 <pre><code><i>// <b>default</b></i>
 273 el.switchOff();
 274
 275 <i>// all config options shown <b>with</b> <b>default</b> values</i>
 276 el.switchOff({
 277     easing: <em>'easeIn'</em>,
 278     duration: .3,
 279     remove: false,
 280     useDisplay: false
 281 });</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 expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.Fx-syncFx"></a><b><a href="source/Fx.html#method-Ext.Fx-syncFx">syncFx</a></b>()
 282     :
 283                                         Ext.Element<div class="mdesc"><div class="short">Ensures that all effects queued after syncFx is called on the element are
 284 run concurrently.  This is the opposite of ...</div><div class="long">Ensures that all effects queued after syncFx is called on the element are
 285 run concurrently.  This is the opposite of <a href="output/Ext.Fx.html#Ext.Fx-sequenceFx" ext:member="sequenceFx" ext:cls="Ext.Fx">sequenceFx</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</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></tbody></table><a id="Ext.Fx-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>