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