docs/output/Ext.Fx.html

   1         <div class="body-wrap">
   2         <div class="top-tools">
   3             <a class="inner-link" href="#Ext.Fx-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
   4             <a class="inner-link" href="#Ext.Fx-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
   5             <a class="inner-link" href="#Ext.Fx-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
   6                             <a class="inner-link" href="#Ext.Fx-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
   7                         <a class="bookmark" href="../docs/?class=Ext.Fx"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
   8         </div>
   9                 <h1>Class Ext.Fx</h1>
  10         <table cellspacing="0">
  11             <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
  12             <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/Fx.js" target="_blank">Fx.js</a></td></tr>
  13             <tr><td class="label">Class:</td><td class="hd-info">Fx</td></tr>
  14                                     <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
  15                     </table>
  16         <div class="description">
  17             <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
  18 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.
  19 Conversely, since the effects are not actually defined in Element, Ext.Fx <b>must</b> be included in order for the
  20 Element effects to work.</p><br/>
  21 <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
  22 they return the Element object itself as the method return value, it is not always possible to mix the two in a single
  23 method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
  24 Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
  25 while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
  26 expected results and should be done with care.</p><br/>
  27 <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
  28 that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>\r
  29 <pre>Value  Description\r
  30 -----  -----------------------------\r
  31 tl     The top left corner\r
  32 t      The center of the top edge\r
  33 tr     The top right corner\r
  34 l      The center of the left edge\r
  35 r      The center of the right edge\r
  36 bl     The bottom left corner\r
  37 b      The center of the bottom edge\r
  38 br     The bottom right corner</pre>
  39 <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
  40 below are common options that can be passed to any Fx method.</b>        </div>
  41
  42         <div class="hr"></div>
  43                 <a id="Ext.Fx-configs"></a>
  44         <h2>Config Options</h2>
  45         <table cellspacing="0" class="member-table">
  46             <tr>
  47                 <th class="sig-header" colspan="2">Config Options</th>
  48                 <th class="msource-header">Defined By</th>
  49             </tr>
  50                 <tr class="config-row">\r
  51         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  52         <td class="sig">\r
  53         <a id="Ext.Fx-afterCls"></a>\r
  54             <b>afterCls</b> : String            <div class="mdesc">\r
  55                             A css class to apply after the effect                        </div>\r
  56         </td>\r
  57         <td class="msource">Fx</td>\r
  58     </tr>\r
  59         <tr class="config-row alt expandable">\r
  60         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  61         <td class="sig">\r
  62         <a id="Ext.Fx-afterStyle"></a>\r
  63             <b>afterStyle</b> : String/Object/Function            <div class="mdesc">\r
  64                         <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
  65             <div class="long">\r
  66                 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
  67                         </div>\r
  68         </td>\r
  69         <td class="msource">Fx</td>\r
  70     </tr>\r
  71         <tr class="config-row">\r
  72         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  73         <td class="sig">\r
  74         <a id="Ext.Fx-block"></a>\r
  75             <b>block</b> : Boolean            <div class="mdesc">\r
  76                             Whether the effect should block other effects from queueing while it runs                        </div>\r
  77         </td>\r
  78         <td class="msource">Fx</td>\r
  79     </tr>\r
  80         <tr class="config-row alt expandable">\r
  81         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  82         <td class="sig">\r
  83         <a id="Ext.Fx-callback"></a>\r
  84             <b>callback</b> : Function            <div class="mdesc">\r
  85                         <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
  86             <div class="long">\r
  87                 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
  88                         </div>\r
  89         </td>\r
  90         <td class="msource">Fx</td>\r
  91     </tr>\r
  92         <tr class="config-row expandable">\r
  93         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  94         <td class="sig">\r
  95         <a id="Ext.Fx-concurrent"></a>\r
  96             <b>concurrent</b> : Boolean            <div class="mdesc">\r
  97                         <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
  98             <div class="long">\r
  99                 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
 100                         </div>\r
 101         </td>\r
 102         <td class="msource">Fx</td>\r
 103     </tr>\r
 104         <tr class="config-row alt">\r
 105         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 106         <td class="sig">\r
 107         <a id="Ext.Fx-duration"></a>\r
 108             <b>duration</b> : Number            <div class="mdesc">\r
 109                             The length of time (in seconds) that the effect should last                        </div>\r
 110         </td>\r
 111         <td class="msource">Fx</td>\r
 112     </tr>\r
 113         <tr class="config-row">\r
 114         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 115         <td class="sig">\r
 116         <a id="Ext.Fx-easing"></a>\r
 117             <b>easing</b> : String            <div class="mdesc">\r
 118                             A valid Easing value for the effect                        </div>\r
 119         </td>\r
 120         <td class="msource">Fx</td>\r
 121     </tr>\r
 122         <tr class="config-row alt">\r
 123         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 124         <td class="sig">\r
 125         <a id="Ext.Fx-remove"></a>\r
 126             <b>remove</b> : Boolean            <div class="mdesc">\r
 127                             Whether the Element should be removed from the DOM and destroyed after the effect finishes                        </div>\r
 128         </td>\r
 129         <td class="msource">Fx</td>\r
 130     </tr>\r
 131         <tr class="config-row">\r
 132         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 133         <td class="sig">\r
 134         <a id="Ext.Fx-scope"></a>\r
 135             <b>scope</b> : Object            <div class="mdesc">\r
 136                             The scope of the effect function                        </div>\r
 137         </td>\r
 138         <td class="msource">Fx</td>\r
 139     </tr>\r
 140         <tr class="config-row alt">\r
 141         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 142         <td class="sig">\r
 143         <a id="Ext.Fx-stopFx"></a>\r
 144             <b>stopFx</b> : Boolean            <div class="mdesc">\r
 145                             Whether subsequent effects should be stopped and removed after the current effect finishes                        </div>\r
 146         </td>\r
 147         <td class="msource">Fx</td>\r
 148     </tr>\r
 149         <tr class="config-row expandable">\r
 150         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 151         <td class="sig">\r
 152         <a id="Ext.Fx-useDisplay"></a>\r
 153             <b>useDisplay</b> : Boolean            <div class="mdesc">\r
 154                         <div class="short">Whether to use the display CSS property instead of visibility when hiding Elements (only applies to effects that end ...</div>\r
 155             <div class="long">\r
 156                 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
 157                         </div>\r
 158         </td>\r
 159         <td class="msource">Fx</td>\r
 160     </tr>\r
 161             </table>
 162                 <a id="Ext.Fx-props"></a>
 163         <h2>Public Properties</h2>
 164         <div class="no-members">This class has no public properties.</div>        <a id="Ext.Fx-methods"></a>
 165         <h2>Public Methods</h2>
 166                 <table cellspacing="0" class="member-table">
 167             <tr>
 168                 <th class="sig-header" colspan="2">Method</th>
 169                 <th class="msource-header">Defined By</th>
 170             </tr>
 171                 <tr class="method-row expandable">\r
 172         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 173         <td class="sig">\r
 174         <a id="Ext.Fx-fadeIn"></a>\r
 175             <b>fadeIn</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 176                         <div class="short">Fade an element in (from transparent to opaque).  The ending opacity can be specified
 177 using the "endOpacity" config o...</div>\r
 178             <div class="long">\r
 179                 Fade an element in (from transparent to opaque).  The ending opacity can be specified
 180 using the "endOpacity" config option.
 181 Usage:\r
 182 <pre><code><i>// <b>default</b>: fade <b>in</b> from opacity 0 to 100%</i>
 183 el.fadeIn();
 184
 185 <i>// custom: fade <b>in</b> from opacity 0 to 75% over 2 seconds</i>
 186 el.fadeIn({ endOpacity: .75, duration: 2});
 187
 188 <i>// common config options shown <b>with</b> default values</i>
 189 el.fadeIn({
 190     endOpacity: 1, <i>//can be any value between 0 and 1 (e.g. .5)</i>
 191     easing: <em>'easeOut'</em>,
 192     duration: .5
 193 });</code></pre>    <div class="mdetail-params">\r
 194         <strong>Parameters:</strong>\r
 195         <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>\r
 196         <strong>Returns:</strong>\r
 197         <ul>\r
 198             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 199         </ul>\r
 200     </div>\r
 201                 </div>\r
 202                         </div>\r
 203         </td>\r
 204         <td class="msource">Fx</td>\r
 205     </tr>\r
 206         <tr class="method-row alt expandable">\r
 207         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 208         <td class="sig">\r
 209         <a id="Ext.Fx-fadeOut"></a>\r
 210             <b>fadeOut</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 211                         <div class="short">Fade an element out (from opaque to transparent).  The ending opacity can be specified
 212 using the "endOpacity" config ...</div>\r
 213             <div class="long">\r
 214                 Fade an element out (from opaque to transparent).  The ending opacity can be specified
 215 using the "endOpacity" config option.  Note that IE may require useDisplay:true in order
 216 to redisplay correctly.
 217 Usage:\r
 218 <pre><code><i>// <b>default</b>: fade out from the element's current opacity to 0</i>
 219 el.fadeOut();
 220
 221 <i>// custom: fade out from the element's current opacity to 25% over 2 seconds</i>
 222 el.fadeOut({ endOpacity: .25, duration: 2});
 223
 224 <i>// common config options shown <b>with</b> default values</i>
 225 el.fadeOut({
 226     endOpacity: 0, <i>//can be any value between 0 and 1 (e.g. .5)</i>
 227     easing: <em>'easeOut'</em>,
 228     duration: .5,
 229     remove: false,
 230     useDisplay: false
 231 });</code></pre>    <div class="mdetail-params">\r
 232         <strong>Parameters:</strong>\r
 233         <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>\r
 234         <strong>Returns:</strong>\r
 235         <ul>\r
 236             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 237         </ul>\r
 238     </div>\r
 239                 </div>\r
 240                         </div>\r
 241         </td>\r
 242         <td class="msource">Fx</td>\r
 243     </tr>\r
 244         <tr class="method-row expandable">\r
 245         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 246         <td class="sig">\r
 247         <a id="Ext.Fx-frame"></a>\r
 248             <b>frame</b>(&nbsp;<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>&nbsp;) : Ext.Element            <div class="mdesc">\r
 249                         <div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.
 250 Usage:\r
 251 // default: a single light ...</div>\r
 252             <div class="long">\r
 253                 Shows a ripple of exploding, attenuating borders to draw attention to an Element.
 254 Usage:\r
 255 <pre><code><i>// <b>default</b>: a single light blue ripple</i>
 256 el.frame();
 257
 258 <i>// custom: 3 red ripples lasting 3 seconds total</i>
 259 el.frame(<em>"ff0000"</em>, 3, { duration: 3 });
 260
 261 <i>// common config options shown <b>with</b> default values</i>
 262 el.frame(<em>"C3DAF9"</em>, 1, {
 263     duration: 1 <i>//duration of each individual ripple.</i>
 264     <i>// Note: Easing is not configurable and will be ignored <b>if</b> included</i>
 265 });</code></pre>    <div class="mdetail-params">\r
 266         <strong>Parameters:</strong>\r
 267         <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
 268         <strong>Returns:</strong>\r
 269         <ul>\r
 270             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 271         </ul>\r
 272     </div>\r
 273                 </div>\r
 274                         </div>\r
 275         </td>\r
 276         <td class="msource">Fx</td>\r
 277     </tr>\r
 278         <tr class="method-row alt expandable">\r
 279         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 280         <td class="sig">\r
 281         <a id="Ext.Fx-ghost"></a>\r
 282             <b>ghost</b>(&nbsp;<span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 283                         <div class="short">Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
 284 ending point of...</div>\r
 285             <div class="long">\r
 286                 Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
 287 ending point of the effect.
 288 Usage:
 289 <pre><code><i>// <b>default</b>: slide the element downward <b>while</b> fading out</i>
 290 el.ghost();
 291
 292 <i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
 293 el.ghost(<em>'r'</em>, { duration: 2 });
 294
 295 <i>// common config options shown <b>with</b> default values</i>
 296 el.ghost(<em>'b'</em>, {
 297     easing: <em>'easeOut'</em>,
 298     duration: .5,
 299     remove: false,
 300     useDisplay: false
 301 });</code></pre>    <div class="mdetail-params">\r
 302         <strong>Parameters:</strong>\r
 303         <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
 304         <strong>Returns:</strong>\r
 305         <ul>\r
 306             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 307         </ul>\r
 308     </div>\r
 309                 </div>\r
 310                         </div>\r
 311         </td>\r
 312         <td class="msource">Fx</td>\r
 313     </tr>\r
 314         <tr class="method-row expandable">\r
 315         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 316         <td class="sig">\r
 317         <a id="Ext.Fx-hasActiveFx"></a>\r
 318             <b>hasActiveFx</b>() : Boolean            <div class="mdesc">\r
 319                         <div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div>\r
 320             <div class="long">\r
 321                 Returns true if the element has any effects actively running or queued, else returns false.    <div class="mdetail-params">\r
 322         <strong>Parameters:</strong>\r
 323         <ul><li>None.</li>        </ul>\r
 324         <strong>Returns:</strong>\r
 325         <ul>\r
 326             <li><code>Boolean</code><div class="sub-desc">True if element has active effects, else false</div></li>\r
 327         </ul>\r
 328     </div>\r
 329                 </div>\r
 330                         </div>\r
 331         </td>\r
 332         <td class="msource">Fx</td>\r
 333     </tr>\r
 334         <tr class="method-row alt expandable">\r
 335         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 336         <td class="sig">\r
 337         <a id="Ext.Fx-hasFxBlock"></a>\r
 338             <b>hasFxBlock</b>() : Boolean            <div class="mdesc">\r
 339                         <div class="short">Returns true if the element is currently blocking so that no other effect can be queued
 340 until this effect is finished...</div>\r
 341             <div class="long">\r
 342                 Returns true if the element is currently blocking so that no other effect can be queued
 343 until this effect is finished, else returns false if blocking is not set.  This is commonly
 344 used to ensure that an effect initiated by a user action runs to completion prior to the
 345 same effect being restarted (e.g., firing only one effect even if the user clicks several times).    <div class="mdetail-params">\r
 346         <strong>Parameters:</strong>\r
 347         <ul><li>None.</li>        </ul>\r
 348         <strong>Returns:</strong>\r
 349         <ul>\r
 350             <li><code>Boolean</code><div class="sub-desc">True if blocking, else false</div></li>\r
 351         </ul>\r
 352     </div>\r
 353                 </div>\r
 354                         </div>\r
 355         </td>\r
 356         <td class="msource">Fx</td>\r
 357     </tr>\r
 358         <tr class="method-row expandable">\r
 359         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 360         <td class="sig">\r
 361         <a id="Ext.Fx-highlight"></a>\r
 362             <b>highlight</b>(&nbsp;<span class="optional" title="Optional">[<code>String color</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 363                         <div class="short">Highlights the Element by setting a color (applies to the background-color by default, but can be
 364 changed using the "...</div>\r
 365             <div class="long">\r
 366                 Highlights the Element by setting a color (applies to the background-color by default, but can be
 367 changed using the "attr" config option) and then fading back to the original color. If no original
 368 color is available, you should provide the "endColor" config option which will be cleared after the animation.
 369 Usage:\r
 370 <pre><code><i>// <b>default</b>: highlight background to yellow</i>
 371 el.highlight();
 372
 373 <i>// custom: highlight foreground text to blue <b>for</b> 2 seconds</i>
 374 el.highlight(<em>"0000ff"</em>, { attr: <em>'color'</em>, duration: 2 });
 375
 376 <i>// common config options shown <b>with</b> default values</i>
 377 el.highlight(<em>"ffff9c"</em>, {
 378     attr: <em>"background-color"</em>, <i>//can be any valid CSS property (attribute) that supports a color value</i>
 379     endColor: (current color) or <em>"ffffff"</em>,
 380     easing: <em>'easeIn'</em>,
 381     duration: 1
 382 });</code></pre>    <div class="mdetail-params">\r
 383         <strong>Parameters:</strong>\r
 384         <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
 385         <strong>Returns:</strong>\r
 386         <ul>\r
 387             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 388         </ul>\r
 389     </div>\r
 390                 </div>\r
 391                         </div>\r
 392         </td>\r
 393         <td class="msource">Fx</td>\r
 394     </tr>\r
 395         <tr class="method-row alt expandable">\r
 396         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 397         <td class="sig">\r
 398         <a id="Ext.Fx-pause"></a>\r
 399             <b>pause</b>(&nbsp;<code>Number seconds</code>&nbsp;) : Ext.Element            <div class="mdesc">\r
 400                         <div class="short">Creates a pause before any subsequent queued effects begin.  If there are
 401 no effects queued after the pause it will h...</div>\r
 402             <div class="long">\r
 403                 Creates a pause before any subsequent queued effects begin.  If there are
 404 no effects queued after the pause it will have no effect.
 405 Usage:\r
 406 <pre><code>el.pause(1);</code></pre>    <div class="mdetail-params">\r
 407         <strong>Parameters:</strong>\r
 408         <ul><li><code>seconds</code> : Number<div class="sub-desc">The length of time to pause (in seconds)</div></li>        </ul>\r
 409         <strong>Returns:</strong>\r
 410         <ul>\r
 411             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 412         </ul>\r
 413     </div>\r
 414                 </div>\r
 415                         </div>\r
 416         </td>\r
 417         <td class="msource">Fx</td>\r
 418     </tr>\r
 419         <tr class="method-row expandable">\r
 420         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 421         <td class="sig">\r
 422         <a id="Ext.Fx-puff"></a>\r
 423             <b>puff</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 424                         <div class="short">Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
 425 element will b...</div>\r
 426             <div class="long">\r
 427                 Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
 428 element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
 429 The element must be removed from the DOM using the 'remove' config option if desired.
 430 Usage:
 431 <pre><code><i>// <b>default</b></i>
 432 el.puff();
 433
 434 <i>// common config options shown <b>with</b> default values</i>
 435 el.puff({
 436     easing: <em>'easeOut'</em>,
 437     duration: .5,
 438     remove: false,
 439     useDisplay: false
 440 });</code></pre>    <div class="mdetail-params">\r
 441         <strong>Parameters:</strong>\r
 442         <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>\r
 443         <strong>Returns:</strong>\r
 444         <ul>\r
 445             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 446         </ul>\r
 447     </div>\r
 448                 </div>\r
 449                         </div>\r
 450         </td>\r
 451         <td class="msource">Fx</td>\r
 452     </tr>\r
 453         <tr class="method-row alt expandable">\r
 454         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 455         <td class="sig">\r
 456         <a id="Ext.Fx-scale"></a>\r
 457             <b>scale</b>(&nbsp;<code>Number width</code>, <code>Number height</code>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 458                         <div class="short">Animates the transition of an element's dimensions from a starting height/width
 459 to an ending height/width.
 460 Usage:\r
 461 //...</div>\r
 462             <div class="long">\r
 463                 Animates the transition of an element's dimensions from a starting height/width
 464 to an ending height/width.
 465 Usage:\r
 466 <pre><code><i>// change height and width to 100x100 pixels</i>
 467 el.scale(100, 100);
 468
 469 <i>// common config options shown <b>with</b> default values.  The height and width will <b>default</b> to</i>
 470 <i>// the element's existing values <b>if</b> passed as null.</i>
 471 el.scale(
 472     [element's width],
 473     [element's height], {
 474             easing: <em>'easeOut'</em>,
 475             duration: .35
 476         }
 477 );</code></pre>    <div class="mdetail-params">\r
 478         <strong>Parameters:</strong>\r
 479         <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
 480         <strong>Returns:</strong>\r
 481         <ul>\r
 482             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 483         </ul>\r
 484     </div>\r
 485                 </div>\r
 486                         </div>\r
 487         </td>\r
 488         <td class="msource">Fx</td>\r
 489     </tr>\r
 490         <tr class="method-row expandable">\r
 491         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 492         <td class="sig">\r
 493         <a id="Ext.Fx-sequenceFx"></a>\r
 494             <b>sequenceFx</b>() : Ext.Element            <div class="mdesc">\r
 495                         <div class="short">Ensures that all effects queued after sequenceFx is called on the element are
 496 run in sequence.  This is the opposite ...</div>\r
 497             <div class="long">\r
 498                 Ensures that all effects queued after sequenceFx is called on the element are
 499 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
 500         <strong>Parameters:</strong>\r
 501         <ul><li>None.</li>        </ul>\r
 502         <strong>Returns:</strong>\r
 503         <ul>\r
 504             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 505         </ul>\r
 506     </div>\r
 507                 </div>\r
 508                         </div>\r
 509         </td>\r
 510         <td class="msource">Fx</td>\r
 511     </tr>\r
 512         <tr class="method-row alt expandable">\r
 513         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 514         <td class="sig">\r
 515         <a id="Ext.Fx-shift"></a>\r
 516             <b>shift</b>(&nbsp;<code>Object options</code>&nbsp;) : Ext.Element            <div class="mdesc">\r
 517                         <div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
 518 Any of these prope...</div>\r
 519             <div class="long">\r
 520                 Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
 521 Any of these properties not specified in the config object will not be changed.  This effect
 522 requires that at least one new dimension, position or opacity setting must be passed in on
 523 the config object in order for the function to have any effect.
 524 Usage:\r
 525 <pre><code><i>// slide the element horizontally to x position 200 <b>while</b> changing the height and opacity</i>
 526 el.shift({ x: 200, height: 50, opacity: .8 });
 527
 528 <i>// common config options shown <b>with</b> default values.</i>
 529 el.shift({
 530     width: [element's width],
 531     height: [element's height],
 532     x: [element's x position],
 533     y: [element's y position],
 534     opacity: [element's opacity],
 535     easing: <em>'easeOut'</em>,
 536     duration: .35
 537 });</code></pre>    <div class="mdetail-params">\r
 538         <strong>Parameters:</strong>\r
 539         <ul><li><code>options</code> : Object<div class="sub-desc">Object literal with any of the Fx config options</div></li>        </ul>\r
 540         <strong>Returns:</strong>\r
 541         <ul>\r
 542             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 543         </ul>\r
 544     </div>\r
 545                 </div>\r
 546                         </div>\r
 547         </td>\r
 548         <td class="msource">Fx</td>\r
 549     </tr>\r
 550         <tr class="method-row expandable">\r
 551         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 552         <td class="sig">\r
 553         <a id="Ext.Fx-slideIn"></a>\r
 554             <b>slideIn</b>(&nbsp;<span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 555                         <div class="short">Slides the element into view.  An anchor point can be optionally passed to set the point of
 556 origin for the slide effe...</div>\r
 557             <div class="long">\r
 558                 Slides the element into view.  An anchor point can be optionally passed to set the point of
 559 origin for the slide effect.  This function automatically handles wrapping the element with
 560 a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 561 Usage:
 562 <pre><code><i>// <b>default</b>: slide the element <b>in</b> from the top</i>
 563 el.slideIn();
 564
 565 <i>// custom: slide the element <b>in</b> from the right <b>with</b> a 2-second duration</i>
 566 el.slideIn(<em>'r'</em>, { duration: 2 });
 567
 568 <i>// common config options shown <b>with</b> default values</i>
 569 el.slideIn(<em>'t'</em>, {
 570     easing: <em>'easeOut'</em>,
 571     duration: .5
 572 });</code></pre>    <div class="mdetail-params">\r
 573         <strong>Parameters:</strong>\r
 574         <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
 575         <strong>Returns:</strong>\r
 576         <ul>\r
 577             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 578         </ul>\r
 579     </div>\r
 580                 </div>\r
 581                         </div>\r
 582         </td>\r
 583         <td class="msource">Fx</td>\r
 584     </tr>\r
 585         <tr class="method-row alt expandable">\r
 586         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 587         <td class="sig">\r
 588         <a id="Ext.Fx-slideOut"></a>\r
 589             <b>slideOut</b>(&nbsp;<span class="optional" title="Optional">[<code>String anchor</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 590                         <div class="short">Slides the element out of view.  An anchor point can be optionally passed to set the end point
 591 for the slide effect. ...</div>\r
 592             <div class="long">\r
 593                 Slides the element out of view.  An anchor point can be optionally passed to set the end point
 594 for the slide effect.  When the effect is completed, the element will be hidden (visibility =
 595 'hidden') but block elements will still take up space in the document.  The element must be removed
 596 from the DOM using the 'remove' config option if desired.  This function automatically handles
 597 wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 598 Usage:
 599 <pre><code><i>// <b>default</b>: slide the element out to the top</i>
 600 el.slideOut();
 601
 602 <i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
 603 el.slideOut(<em>'r'</em>, { duration: 2 });
 604
 605 <i>// common config options shown <b>with</b> default values</i>
 606 el.slideOut(<em>'t'</em>, {
 607     easing: <em>'easeOut'</em>,
 608     duration: .5,
 609     remove: false,
 610     useDisplay: false
 611 });</code></pre>    <div class="mdetail-params">\r
 612         <strong>Parameters:</strong>\r
 613         <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
 614         <strong>Returns:</strong>\r
 615         <ul>\r
 616             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 617         </ul>\r
 618     </div>\r
 619                 </div>\r
 620                         </div>\r
 621         </td>\r
 622         <td class="msource">Fx</td>\r
 623     </tr>\r
 624         <tr class="method-row expandable">\r
 625         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 626         <td class="sig">\r
 627         <a id="Ext.Fx-stopFx"></a>\r
 628             <b>stopFx</b>() : Ext.Element            <div class="mdesc">\r
 629                         <div class="short">Stops any running effects and clears the element's internal effects queue if it contains
 630 any additional effects that ...</div>\r
 631             <div class="long">\r
 632                 Stops any running effects and clears the element's internal effects queue if it contains
 633 any additional effects that haven't started yet.    <div class="mdetail-params">\r
 634         <strong>Parameters:</strong>\r
 635         <ul><li>None.</li>        </ul>\r
 636         <strong>Returns:</strong>\r
 637         <ul>\r
 638             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 639         </ul>\r
 640     </div>\r
 641                 </div>\r
 642                         </div>\r
 643         </td>\r
 644         <td class="msource">Fx</td>\r
 645     </tr>\r
 646         <tr class="method-row alt expandable">\r
 647         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 648         <td class="sig">\r
 649         <a id="Ext.Fx-switchOff"></a>\r
 650             <b>switchOff</b>(&nbsp;<span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">\r
 651                         <div class="short">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
 652 Whe...</div>\r
 653             <div class="long">\r
 654                 Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
 655 When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
 656 take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
 657 Usage:
 658 <pre><code><i>// <b>default</b></i>
 659 el.switchOff();
 660
 661 <i>// all config options shown <b>with</b> default values</i>
 662 el.switchOff({
 663     easing: <em>'easeIn'</em>,
 664     duration: .3,
 665     remove: false,
 666     useDisplay: false
 667 });</code></pre>    <div class="mdetail-params">\r
 668         <strong>Parameters:</strong>\r
 669         <ul><li><code>options</code> : Object<div class="sub-desc">(optional) Object literal with any of the Fx config options</div></li>        </ul>\r
 670         <strong>Returns:</strong>\r
 671         <ul>\r
 672             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 673         </ul>\r
 674     </div>\r
 675                 </div>\r
 676                         </div>\r
 677         </td>\r
 678         <td class="msource">Fx</td>\r
 679     </tr>\r
 680         <tr class="method-row expandable">\r
 681         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 682         <td class="sig">\r
 683         <a id="Ext.Fx-syncFx"></a>\r
 684             <b>syncFx</b>() : Ext.Element            <div class="mdesc">\r
 685                         <div class="short">Ensures that all effects queued after syncFx is called on the element are
 686 run concurrently.  This is the opposite of ...</div>\r
 687             <div class="long">\r
 688                 Ensures that all effects queued after syncFx is called on the element are
 689 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
 690         <strong>Parameters:</strong>\r
 691         <ul><li>None.</li>        </ul>\r
 692         <strong>Returns:</strong>\r
 693         <ul>\r
 694             <li><code>Ext.Element</code><div class="sub-desc">The Element</div></li>\r
 695         </ul>\r
 696     </div>\r
 697                 </div>\r
 698                         </div>\r
 699         </td>\r
 700         <td class="msource">Fx</td>\r
 701     </tr>\r
 702             </table>
 703                 <a id="Ext.Fx-events"></a>
 704         <h2>Public Events</h2>
 705         <div class="no-members">This class has no public events.</div>
 706         </div>