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>