Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Element.anim.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
19 </span> * @class Ext.core.Element
20  */
21 Ext.applyIf(Ext.core.Element.prototype, {
22     // @private override base Ext.util.Animate mixin for animate for backwards compatibility
23     animate: function(config) {
24         var me = this;
25         if (!me.id) {
26             me = Ext.get(me.dom);
27         }
28         if (Ext.fx.Manager.hasFxBlock(me.id)) {
29             return me;
30         }
31         Ext.fx.Manager.queueFx(Ext.create('Ext.fx.Anim', me.anim(config)));
32         return this;
33     },
34
35     // @private override base Ext.util.Animate mixin for animate for backwards compatibility
36     anim: function(config) {
37         if (!Ext.isObject(config)) {
38             return (config) ? {} : false;
39         }
40
41         var me = this,
42             duration = config.duration || Ext.fx.Anim.prototype.duration,
43             easing = config.easing || 'ease',
44             animConfig;
45
46         if (config.stopAnimation) {
47             me.stopAnimation();
48         }
49
50         Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
51
52         // Clear any 'paused' defaults.
53         Ext.fx.Manager.setFxDefaults(me.id, {
54             delay: 0
55         });
56
57         animConfig = {
58             target: me,
59             remove: config.remove,
60             alternate: config.alternate || false,
61             duration: duration,
62             easing: easing,
63             callback: config.callback,
64             listeners: config.listeners,
65             iterations: config.iterations || 1,
66             scope: config.scope,
67             block: config.block,
68             concurrent: config.concurrent,
69             delay: config.delay || 0,
70             paused: true,
71             keyframes: config.keyframes,
72             from: config.from || {},
73             to: Ext.apply({}, config)
74         };
75         Ext.apply(animConfig.to, config.to);
76
77         // Anim API properties - backward compat
78         delete animConfig.to.to;
79         delete animConfig.to.from;
80         delete animConfig.to.remove;
81         delete animConfig.to.alternate;
82         delete animConfig.to.keyframes;
83         delete animConfig.to.iterations;
84         delete animConfig.to.listeners;
85         delete animConfig.to.target;
86         delete animConfig.to.paused;
87         delete animConfig.to.callback;
88         delete animConfig.to.scope;
89         delete animConfig.to.duration;
90         delete animConfig.to.easing;
91         delete animConfig.to.concurrent;
92         delete animConfig.to.block;
93         delete animConfig.to.stopAnimation;
94         delete animConfig.to.delay;
95         return animConfig;
96     },
97
98 <span id='Ext-core-Element-method-slideIn'>    /**
99 </span>     * Slides the element into view.  An anchor point can be optionally passed to set the point of
100      * origin for the slide effect.  This function automatically handles wrapping the element with
101      * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
102      * Usage:
103      *&lt;pre&gt;&lt;code&gt;
104 // default: slide the element in from the top
105 el.slideIn();
106
107 // custom: slide the element in from the right with a 2-second duration
108 el.slideIn('r', { duration: 2 });
109
110 // common config options shown with default values
111 el.slideIn('t', {
112     easing: 'easeOut',
113     duration: 500
114 });
115 &lt;/code&gt;&lt;/pre&gt;
116      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
117      * @param {Object} options (optional) Object literal with any of the Fx config options
118      * @return {Ext.core.Element} The Element
119      */
120     slideIn: function(anchor, obj, slideOut) { 
121         var me = this,
122             elStyle = me.dom.style,
123             beforeAnim, wrapAnim;
124
125         anchor = anchor || &quot;t&quot;;
126         obj = obj || {};
127
128         beforeAnim = function() {
129             var animScope = this,
130                 listeners = obj.listeners,
131                 box, position, restoreSize, wrap, anim;
132
133             if (!slideOut) {
134                 me.fixDisplay();
135             }
136
137             box = me.getBox();
138             if ((anchor == 't' || anchor == 'b') &amp;&amp; box.height == 0) {
139                 box.height = me.dom.scrollHeight;
140             }
141             else if ((anchor == 'l' || anchor == 'r') &amp;&amp; box.width == 0) {
142                 box.width = me.dom.scrollWidth;
143             }
144             
145             position = me.getPositioning();
146             me.setSize(box.width, box.height);
147
148             wrap = me.wrap({
149                 style: {
150                     visibility: slideOut ? 'visible' : 'hidden'
151                 }
152             });
153             wrap.setPositioning(position);
154             if (wrap.isStyle('position', 'static')) {
155                 wrap.position('relative');
156             }
157             me.clearPositioning('auto');
158             wrap.clip();
159
160             // This element is temporarily positioned absolute within its wrapper.
161             // Restore to its default, CSS-inherited visibility setting.
162             // We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
163             me.setStyle({
164                 visibility: '',
165                 position: 'absolute'
166             });
167             if (slideOut) {
168                 wrap.setSize(box.width, box.height);
169             }
170
171             switch (anchor) {
172                 case 't':
173                     anim = {
174                         from: {
175                             width: box.width + 'px',
176                             height: '0px'
177                         },
178                         to: {
179                             width: box.width + 'px',
180                             height: box.height + 'px'
181                         }
182                     };
183                     elStyle.bottom = '0px';
184                     break;
185                 case 'l':
186                     anim = {
187                         from: {
188                             width: '0px',
189                             height: box.height + 'px'
190                         },
191                         to: {
192                             width: box.width + 'px',
193                             height: box.height + 'px'
194                         }
195                     };
196                     elStyle.right = '0px';
197                     break;
198                 case 'r':
199                     anim = {
200                         from: {
201                             x: box.x + box.width,
202                             width: '0px',
203                             height: box.height + 'px'
204                         },
205                         to: {
206                             x: box.x,
207                             width: box.width + 'px',
208                             height: box.height + 'px'
209                         }
210                     };
211                     break;
212                 case 'b':
213                     anim = {
214                         from: {
215                             y: box.y + box.height,
216                             width: box.width + 'px',
217                             height: '0px'
218                         },
219                         to: {
220                             y: box.y,
221                             width: box.width + 'px',
222                             height: box.height + 'px'
223                         }
224                     };
225                     break;
226                 case 'tl':
227                     anim = {
228                         from: {
229                             x: box.x,
230                             y: box.y,
231                             width: '0px',
232                             height: '0px'
233                         },
234                         to: {
235                             width: box.width + 'px',
236                             height: box.height + 'px'
237                         }
238                     };
239                     elStyle.bottom = '0px';
240                     elStyle.right = '0px';
241                     break;
242                 case 'bl':
243                     anim = {
244                         from: {
245                             x: box.x + box.width,
246                             width: '0px',
247                             height: '0px'
248                         },
249                         to: {
250                             x: box.x,
251                             width: box.width + 'px',
252                             height: box.height + 'px'
253                         }
254                     };
255                     elStyle.right = '0px';
256                     break;
257                 case 'br':
258                     anim = {
259                         from: {
260                             x: box.x + box.width,
261                             y: box.y + box.height,
262                             width: '0px',
263                             height: '0px'
264                         },
265                         to: {
266                             x: box.x,
267                             y: box.y,
268                             width: box.width + 'px',
269                             height: box.height + 'px'
270                         }
271                     };
272                     break;
273                 case 'tr':
274                     anim = {
275                         from: {
276                             y: box.y + box.height,
277                             width: '0px',
278                             height: '0px'
279                         },
280                         to: {
281                             y: box.y,
282                             width: box.width + 'px',
283                             height: box.height + 'px'
284                         }
285                     };
286                     elStyle.bottom = '0px';
287                     break;
288             }
289
290             wrap.show();
291             wrapAnim = Ext.apply({}, obj);
292             delete wrapAnim.listeners;
293             wrapAnim = Ext.create('Ext.fx.Anim', Ext.applyIf(wrapAnim, {
294                 target: wrap,
295                 duration: 500,
296                 easing: 'ease-out',
297                 from: slideOut ? anim.to : anim.from,
298                 to: slideOut ? anim.from : anim.to
299             }));
300
301             // In the absence of a callback, this listener MUST be added first
302             wrapAnim.on('afteranimate', function() {
303                 if (slideOut) {
304                     me.setPositioning(position);
305                     if (obj.useDisplay) {
306                         me.setDisplayed(false);
307                     } else {
308                         me.hide();   
309                     }
310                 }
311                 else {
312                     me.clearPositioning();
313                     me.setPositioning(position);
314                 }
315                 if (wrap.dom) {
316                     wrap.dom.parentNode.insertBefore(me.dom, wrap.dom); 
317                     wrap.remove();
318                 }
319                 me.setSize(box.width, box.height);
320                 animScope.end();
321             });
322             // Add configured listeners after
323             if (listeners) {
324                 wrapAnim.on(listeners);
325             }
326         };
327
328         me.animate({
329             duration: obj.duration ? obj.duration * 2 : 1000,
330             listeners: {
331                 beforeanimate: {
332                     fn: beforeAnim
333                 },
334                 afteranimate: {
335                     fn: function() {
336                         if (wrapAnim &amp;&amp; wrapAnim.running) {
337                             wrapAnim.end();
338                         }
339                     }
340                 }
341             }
342         });
343         return me;
344     },
345
346     
347 <span id='Ext-core-Element-method-slideOut'>    /**
348 </span>     * Slides the element out of view.  An anchor point can be optionally passed to set the end point
349      * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
350      * 'hidden') but block elements will still take up space in the document.  The element must be removed
351      * from the DOM using the 'remove' config option if desired.  This function automatically handles 
352      * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
353      * Usage:
354      *&lt;pre&gt;&lt;code&gt;
355 // default: slide the element out to the top
356 el.slideOut();
357
358 // custom: slide the element out to the right with a 2-second duration
359 el.slideOut('r', { duration: 2 });
360
361 // common config options shown with default values
362 el.slideOut('t', {
363     easing: 'easeOut',
364     duration: 500,
365     remove: false,
366     useDisplay: false
367 });
368 &lt;/code&gt;&lt;/pre&gt;
369      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
370      * @param {Object} options (optional) Object literal with any of the Fx config options
371      * @return {Ext.core.Element} The Element
372      */
373     slideOut: function(anchor, o) {
374         return this.slideIn(anchor, o, true);
375     },
376
377 <span id='Ext-core-Element-method-puff'>    /**
378 </span>     * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
379      * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
380      * Usage:
381      *&lt;pre&gt;&lt;code&gt;
382 // default
383 el.puff();
384
385 // common config options shown with default values
386 el.puff({
387     easing: 'easeOut',
388     duration: 500,
389     useDisplay: false
390 });
391 &lt;/code&gt;&lt;/pre&gt;
392      * @param {Object} options (optional) Object literal with any of the Fx config options
393      * @return {Ext.core.Element} The Element
394      */
395
396     puff: function(obj) {
397         var me = this,
398             beforeAnim;
399         obj = Ext.applyIf(obj || {}, {
400             easing: 'ease-out',
401             duration: 500,
402             useDisplay: false
403         });
404
405         beforeAnim = function() {
406             me.clearOpacity();
407             me.show();
408
409             var box = me.getBox(),
410                 fontSize = me.getStyle('fontSize'),
411                 position = me.getPositioning();
412             this.to = {
413                 width: box.width * 2,
414                 height: box.height * 2,
415                 x: box.x - (box.width / 2),
416                 y: box.y - (box.height /2),
417                 opacity: 0,
418                 fontSize: '200%'
419             };
420             this.on('afteranimate',function() {
421                 if (me.dom) {
422                     if (obj.useDisplay) {
423                         me.setDisplayed(false);
424                     } else {
425                         me.hide();
426                     }
427                     me.clearOpacity();  
428                     me.setPositioning(position);
429                     me.setStyle({fontSize: fontSize});
430                 }
431             });
432         };
433
434         me.animate({
435             duration: obj.duration,
436             easing: obj.easing,
437             listeners: {
438                 beforeanimate: {
439                     fn: beforeAnim
440                 }
441             }
442         });
443         return me;
444     },
445
446 <span id='Ext-core-Element-method-switchOff'>    /**
447 </span>     * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
448      * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
449      * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
450      * Usage:
451      *&lt;pre&gt;&lt;code&gt;
452 // default
453 el.switchOff();
454
455 // all config options shown with default values
456 el.switchOff({
457     easing: 'easeIn',
458     duration: .3,
459     remove: false,
460     useDisplay: false
461 });
462 &lt;/code&gt;&lt;/pre&gt;
463      * @param {Object} options (optional) Object literal with any of the Fx config options
464      * @return {Ext.core.Element} The Element
465      */
466     switchOff: function(obj) {
467         var me = this,
468             beforeAnim;
469         
470         obj = Ext.applyIf(obj || {}, {
471             easing: 'ease-in',
472             duration: 500,
473             remove: false,
474             useDisplay: false
475         });
476
477         beforeAnim = function() {
478             var animScope = this,
479                 size = me.getSize(),
480                 xy = me.getXY(),
481                 keyframe, position;
482             me.clearOpacity();
483             me.clip();
484             position = me.getPositioning();
485
486             keyframe = Ext.create('Ext.fx.Animator', {
487                 target: me,
488                 duration: obj.duration,
489                 easing: obj.easing,
490                 keyframes: {
491                     33: {
492                         opacity: 0.3
493                     },
494                     66: {
495                         height: 1,
496                         y: xy[1] + size.height / 2
497                     },
498                     100: {
499                         width: 1,
500                         x: xy[0] + size.width / 2
501                     }
502                 }
503             });
504             keyframe.on('afteranimate', function() {
505                 if (obj.useDisplay) {
506                     me.setDisplayed(false);
507                 } else {
508                     me.hide();
509                 }  
510                 me.clearOpacity();
511                 me.setPositioning(position);
512                 me.setSize(size);
513                 animScope.end();
514             });
515         };
516         me.animate({
517             duration: (obj.duration * 2),
518             listeners: {
519                 beforeanimate: {
520                     fn: beforeAnim
521                 }
522             }
523         });
524         return me;
525     },
526
527 <span id='Ext-core-Element-method-frame'>   /**
528 </span>    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
529     * Usage:
530 &lt;pre&gt;&lt;code&gt;
531 // default: a single light blue ripple
532 el.frame();
533
534 // custom: 3 red ripples lasting 3 seconds total
535 el.frame(&quot;#ff0000&quot;, 3, { duration: 3 });
536
537 // common config options shown with default values
538 el.frame(&quot;#C3DAF9&quot;, 1, {
539     duration: 1 //duration of each individual ripple.
540     // Note: Easing is not configurable and will be ignored if included
541 });
542 &lt;/code&gt;&lt;/pre&gt;
543     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
544     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
545     * @param {Object} options (optional) Object literal with any of the Fx config options
546     * @return {Ext.core.Element} The Element
547     */
548     frame : function(color, count, obj){
549         var me = this,
550             beforeAnim;
551
552         color = color || '#C3DAF9';
553         count = count || 1;
554         obj = obj || {};
555
556         beforeAnim = function() {
557             me.show();
558             var animScope = this,
559                 box = me.getBox(),
560                 proxy = Ext.getBody().createChild({
561                     style: {
562                         position : 'absolute',
563                         'pointer-events': 'none',
564                         'z-index': 35000,
565                         border : '0px solid ' + color
566                     }
567                 }),
568                 proxyAnim;
569             proxyAnim = Ext.create('Ext.fx.Anim', {
570                 target: proxy,
571                 duration: obj.duration || 1000,
572                 iterations: count,
573                 from: {
574                     top: box.y,
575                     left: box.x,
576                     borderWidth: 0,
577                     opacity: 1,
578                     height: box.height,
579                     width: box.width
580                 },
581                 to: {
582                     top: box.y - 20,
583                     left: box.x - 20,
584                     borderWidth: 10,
585                     opacity: 0,
586                     height: box.height + 40,
587                     width: box.width + 40
588                 }
589             });
590             proxyAnim.on('afteranimate', function() {
591                 proxy.remove();
592                 animScope.end();
593             });
594         };
595
596         me.animate({
597             duration: (obj.duration * 2) || 2000,
598             listeners: {
599                 beforeanimate: {
600                     fn: beforeAnim
601                 }
602             }
603         });
604         return me;
605     },
606
607 <span id='Ext-core-Element-method-ghost'>    /**
608 </span>     * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
609      * ending point of the effect.
610      * Usage:
611      *&lt;pre&gt;&lt;code&gt;
612 // default: slide the element downward while fading out
613 el.ghost();
614
615 // custom: slide the element out to the right with a 2-second duration
616 el.ghost('r', { duration: 2 });
617
618 // common config options shown with default values
619 el.ghost('b', {
620     easing: 'easeOut',
621     duration: 500
622 });
623 &lt;/code&gt;&lt;/pre&gt;
624      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
625      * @param {Object} options (optional) Object literal with any of the Fx config options
626      * @return {Ext.core.Element} The Element
627      */
628     ghost: function(anchor, obj) {
629         var me = this,
630             beforeAnim;
631
632         anchor = anchor || &quot;b&quot;;
633         beforeAnim = function() {
634             var width = me.getWidth(),
635                 height = me.getHeight(),
636                 xy = me.getXY(),
637                 position = me.getPositioning(),
638                 to = {
639                     opacity: 0
640                 };
641             switch (anchor) {
642                 case 't':
643                     to.y = xy[1] - height;
644                     break;
645                 case 'l':
646                     to.x = xy[0] - width;
647                     break;
648                 case 'r':
649                     to.x = xy[0] + width;
650                     break;
651                 case 'b':
652                     to.y = xy[1] + height;
653                     break;
654                 case 'tl':
655                     to.x = xy[0] - width;
656                     to.y = xy[1] - height;
657                     break;
658                 case 'bl':
659                     to.x = xy[0] - width;
660                     to.y = xy[1] + height;
661                     break;
662                 case 'br':
663                     to.x = xy[0] + width;
664                     to.y = xy[1] + height;
665                     break;
666                 case 'tr':
667                     to.x = xy[0] + width;
668                     to.y = xy[1] - height;
669                     break;
670             }
671             this.to = to;
672             this.on('afteranimate', function () {
673                 if (me.dom) {
674                     me.hide();
675                     me.clearOpacity();
676                     me.setPositioning(position);
677                 }
678             });
679         };
680
681         me.animate(Ext.applyIf(obj || {}, {
682             duration: 500,
683             easing: 'ease-out',
684             listeners: {
685                 beforeanimate: {
686                     fn: beforeAnim
687                 }
688             }
689         }));
690         return me;
691     },
692
693 <span id='Ext-core-Element-method-highlight'>    /**
694 </span>     * Highlights the Element by setting a color (applies to the background-color by default, but can be
695      * changed using the &quot;attr&quot; config option) and then fading back to the original color. If no original
696      * color is available, you should provide the &quot;endColor&quot; config option which will be cleared after the animation.
697      * Usage:
698 &lt;pre&gt;&lt;code&gt;
699 // default: highlight background to yellow
700 el.highlight();
701
702 // custom: highlight foreground text to blue for 2 seconds
703 el.highlight(&quot;0000ff&quot;, { attr: 'color', duration: 2 });
704
705 // common config options shown with default values
706 el.highlight(&quot;ffff9c&quot;, {
707     attr: &quot;backgroundColor&quot;, //can be any valid CSS property (attribute) that supports a color value
708     endColor: (current color) or &quot;ffffff&quot;,
709     easing: 'easeIn',
710     duration: 1000
711 });
712 &lt;/code&gt;&lt;/pre&gt;
713      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
714      * @param {Object} options (optional) Object literal with any of the Fx config options
715      * @return {Ext.core.Element} The Element
716      */ 
717     highlight: function(color, o) {
718         var me = this,
719             dom = me.dom,
720             from = {},
721             restore, to, attr, lns, event, fn;
722
723         o = o || {};
724         lns = o.listeners || {};
725         attr = o.attr || 'backgroundColor';
726         from[attr] = color || 'ffff9c';
727         
728         if (!o.to) {
729             to = {};
730             to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
731         }
732         else {
733             to = o.to;
734         }
735         
736         // Don't apply directly on lns, since we reference it in our own callbacks below
737         o.listeners = Ext.apply(Ext.apply({}, lns), {
738             beforeanimate: function() {
739                 restore = dom.style[attr];
740                 me.clearOpacity();
741                 me.show();
742                 
743                 event = lns.beforeanimate;
744                 if (event) {
745                     fn = event.fn || event;
746                     return fn.apply(event.scope || lns.scope || window, arguments);
747                 }
748             },
749             afteranimate: function() {
750                 if (dom) {
751                     dom.style[attr] = restore;
752                 }
753                 
754                 event = lns.afteranimate;
755                 if (event) {
756                     fn = event.fn || event;
757                     fn.apply(event.scope || lns.scope || window, arguments);
758                 }
759             }
760         });
761
762         me.animate(Ext.apply({}, o, {
763             duration: 1000,
764             easing: 'ease-in',
765             from: from,
766             to: to
767         }));
768         return me;
769     },
770
771 <span id='Ext-core-Element-method-pause'>   /**
772 </span>    * @deprecated 4.0
773     * Creates a pause before any subsequent queued effects begin.  If there are
774     * no effects queued after the pause it will have no effect.
775     * Usage:
776 &lt;pre&gt;&lt;code&gt;
777 el.pause(1);
778 &lt;/code&gt;&lt;/pre&gt;
779     * @param {Number} seconds The length of time to pause (in seconds)
780     * @return {Ext.Element} The Element
781     */
782     pause: function(ms) {
783         var me = this;
784         Ext.fx.Manager.setFxDefaults(me.id, {
785             delay: ms
786         });
787         return me;
788     },
789
790 <span id='Ext-core-Element-method-fadeIn'>   /**
791 </span>    * Fade an element in (from transparent to opaque).  The ending opacity can be specified
792     * using the &lt;tt&gt;{@link #endOpacity}&lt;/tt&gt; config option.
793     * Usage:
794 &lt;pre&gt;&lt;code&gt;
795 // default: fade in from opacity 0 to 100%
796 el.fadeIn();
797
798 // custom: fade in from opacity 0 to 75% over 2 seconds
799 el.fadeIn({ endOpacity: .75, duration: 2});
800
801 // common config options shown with default values
802 el.fadeIn({
803     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
804     easing: 'easeOut',
805     duration: 500
806 });
807 &lt;/code&gt;&lt;/pre&gt;
808     * @param {Object} options (optional) Object literal with any of the Fx config options
809     * @return {Ext.Element} The Element
810     */
811     fadeIn: function(o) {
812         this.animate(Ext.apply({}, o, {
813             opacity: 1
814         }));
815         return this;
816     },
817
818 <span id='Ext-core-Element-method-fadeOut'>   /**
819 </span>    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
820     * using the &lt;tt&gt;{@link #endOpacity}&lt;/tt&gt; config option.  Note that IE may require
821     * &lt;tt&gt;{@link #useDisplay}:true&lt;/tt&gt; in order to redisplay correctly.
822     * Usage:
823 &lt;pre&gt;&lt;code&gt;
824 // default: fade out from the element's current opacity to 0
825 el.fadeOut();
826
827 // custom: fade out from the element's current opacity to 25% over 2 seconds
828 el.fadeOut({ endOpacity: .25, duration: 2});
829
830 // common config options shown with default values
831 el.fadeOut({
832     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
833     easing: 'easeOut',
834     duration: 500,
835     remove: false,
836     useDisplay: false
837 });
838 &lt;/code&gt;&lt;/pre&gt;
839     * @param {Object} options (optional) Object literal with any of the Fx config options
840     * @return {Ext.Element} The Element
841     */
842     fadeOut: function(o) {
843         this.animate(Ext.apply({}, o, {
844             opacity: 0
845         }));
846         return this;
847     },
848
849 <span id='Ext-core-Element-method-scale'>   /**
850 </span>    * @deprecated 4.0
851     * Animates the transition of an element's dimensions from a starting height/width
852     * to an ending height/width.  This method is a convenience implementation of {@link #shift}.
853     * Usage:
854 &lt;pre&gt;&lt;code&gt;
855 // change height and width to 100x100 pixels
856 el.scale(100, 100);
857
858 // common config options shown with default values.  The height and width will default to
859 // the element&amp;#39;s existing values if passed as null.
860 el.scale(
861     [element&amp;#39;s width],
862     [element&amp;#39;s height], {
863         easing: 'easeOut',
864         duration: .35
865     }
866 );
867 &lt;/code&gt;&lt;/pre&gt;
868     * @param {Number} width  The new width (pass undefined to keep the original width)
869     * @param {Number} height  The new height (pass undefined to keep the original height)
870     * @param {Object} options (optional) Object literal with any of the Fx config options
871     * @return {Ext.Element} The Element
872     */
873     scale: function(w, h, o) {
874         this.animate(Ext.apply({}, o, {
875             width: w,
876             height: h
877         }));
878         return this;
879     },
880
881 <span id='Ext-core-Element-method-shift'>   /**
882 </span>    * @deprecated 4.0
883     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
884     * Any of these properties not specified in the config object will not be changed.  This effect 
885     * requires that at least one new dimension, position or opacity setting must be passed in on
886     * the config object in order for the function to have any effect.
887     * Usage:
888 &lt;pre&gt;&lt;code&gt;
889 // slide the element horizontally to x position 200 while changing the height and opacity
890 el.shift({ x: 200, height: 50, opacity: .8 });
891
892 // common config options shown with default values.
893 el.shift({
894     width: [element&amp;#39;s width],
895     height: [element&amp;#39;s height],
896     x: [element&amp;#39;s x position],
897     y: [element&amp;#39;s y position],
898     opacity: [element&amp;#39;s opacity],
899     easing: 'easeOut',
900     duration: .35
901 });
902 &lt;/code&gt;&lt;/pre&gt;
903     * @param {Object} options  Object literal with any of the Fx config options
904     * @return {Ext.Element} The Element
905     */
906     shift: function(config) {
907         this.animate(config);
908         return this;
909     }
910 });
911 </pre>
912 </body>
913 </html>