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