git.roojs.org Git - roojs1/blob - docs.old/symbols/Roo.Fx.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5
   6         <head>
   7                 <meta http-equiv="content-type" content="text/html; charset=undefined" />
   8                 <meta name="generator" content="JsDoc Toolkit" />
   9
  10
  11                 <title>JsDoc Reference - Roo.Fx</title>
  12
  13
  14         <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
  15         <link rel="stylesheet" type="text/css" href="../default.css" />
  16
  17
  18         <script type="text/javascript" src="../page.js">
  19
  20         </script>
  21
  22
  23         </head>
  24
  25         <body onload="RooDocsPage.onload();">
  26
  27
  28 <div class="body-wrap">
  29
  30     <!-- ============================== links to methods. ================================= -->
  31
  32     <div class="top-tools">
  33     <!--
  34         <a class="inner-link" href="#Roo.Fx-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
  35         <a class="inner-link" href="#Roo.Fx-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
  36         <a class="inner-link" href="#Roo.Fx-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
  37         <a class="inner-link" href="#Roo.Fx-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
  38         <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
  39         -->
  40     </div>
  41
  42
  43 <!-- ============================== inheritance Block. ================================= -->
  44
  45 <!-- ============================== class title / details ============================ -->
  46
  47
  48     <h1 class="classTitle">
  49
  50                                 Class Roo.Fx
  51                         </h1>
  52
  53     <table cellspacing="0" class="class-summary-table">
  54
  55                 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
  56
  57         <tr><td class="label">Defined In:</td><td class="hd-info">
  58
  59                                         <a href="./src/Roo_Fx.js.html">Roo/Fx.js</a>.
  60
  61         </td></tr>
  62         <tr><td class="label">Class:</td><td class="hd-info">Fx</td></tr>
  63
  64
  65
  66
  67     </table>
  68
  69
  70 <!-- ============================== class summary ========================== -->
  71     <div class="description">
  72         <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied<br/>to the {<b>link</b> Roo.Element} interface when included, so all effects calls should be performed via Element.<br/>Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the <br/>Element effects to work.</p><br/><br/><br/><p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that<br/>they return the Element object itself as the method return value, it is not always possible to mix the two in a single<br/>method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.<br/>Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,<br/>while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the<br/>expected results and should be done with care.</p><br/><br/><br/><p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element<br/>that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p><br/><pre><br/>Value  Description<br/>-----  -----------------------------<br/>tl     The top left corner<br/>t      The center of the top edge<br/>tr     The top right corner<br/>l      The center of the left edge<br/>r      The center of the right edge<br/>bl     The bottom left corner<br/>b      The center of the bottom edge<br/>br     The bottom right corner<br/></pre><br/><b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section<br/>below are common options that can be passed to any Fx method.</b>
  73     </div>
  74
  75
  76 <!-- ============================== Class comment block... ========================== -->
  77
  78 <div class="comments">
  79         <b>Class Comments / Notes</B> =>
  80         <u onclick="parent.CommentDialog.showCommentId = 'Roo.Fx';">[Add Your comment/notes about this class]</u>
  81         <br/>
  82         <iframe frameborder="0"  id="comments-Roo" style="border: none;width:100%;"
  83                 src="/blog.php/GtkDjsComments/Roo.Fx.html"></iframe>
  84 </div>
  85
  86
  87
  88 <!-- ============================== config options ========================== -->
  89
  90
  91
  92
  93     <div class="hr"></div>
  94     <a id="Roo.Fx-configs"></a>
  95
  96
  97
  98
  99
 100       <table cellspacing="0" class="member-table">
 101       <caption>Config Options (Usually are also Properties)</caption>
 102
 103
 104         <tr>
 105             <th class="sig-header" colspan="2">Options</th>
 106
 107             <th class="msource-header">Defined By</th>
 108         </tr>
 109
 110
 111
 112
 113
 114                 <tr class="config-row expandable config-row-alt0 notInherited">
 115                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 116                     <td class="sig">
 117
 118                         <a id="Roo.Fx-cfg-afterCls" name=".afterCls"></a>
 119                         <div class="fixedFont">
 120                                 <b  class="itemname">afterCls</b> : <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>
 121
 122
 123                         </div>
 124
 125                         <div class="mdesc">
 126                             <div class="short">A css class to apply after the effect</div>
 127                         </div>
 128
 129                         <div class="mdesc">
 130                             <div class="long">
 131                     A css class to apply after the effect
 132
 133                 </div>
 134                         </div>
 135
 136
 137
 138                     </td>
 139                     <td class="msource">
 140
 141                         Roo.Fx
 142
 143                     </td>
 144                 </tr>
 145
 146
 147                 <tr class="config-row expandable config-row-alt1 notInherited">
 148                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 149                     <td class="sig">
 150
 151                         <a id="Roo.Fx-cfg-afterStyle" name=".afterStyle"></a>
 152                         <div class="fixedFont">
 153                                 <b  class="itemname">afterStyle</b> : <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/Object/Function
 154
 155
 156                         </div>
 157
 158                         <div class="mdesc">
 159                             <div class="short">A style specification string, e.g.</div>
 160                         </div>
 161
 162                         <div class="mdesc">
 163                             <div class="long">
 164                     A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or<br/>a function which returns such a specification that will be applied to the Element after the effect finishes
 165
 166                 </div>
 167                         </div>
 168
 169
 170
 171                     </td>
 172                     <td class="msource">
 173
 174                         Roo.Fx
 175
 176                     </td>
 177                 </tr>
 178
 179
 180                 <tr class="config-row expandable config-row-alt0 notInherited">
 181                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 182                     <td class="sig">
 183
 184                         <a id="Roo.Fx-cfg-block" name=".block"></a>
 185                         <div class="fixedFont">
 186                                 <b  class="itemname">block</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 187
 188
 189                         </div>
 190
 191                         <div class="mdesc">
 192                             <div class="short">Whether the effect should block other effects from queueing while it runs</div>
 193                         </div>
 194
 195                         <div class="mdesc">
 196                             <div class="long">
 197                     Whether the effect should block other effects from queueing while it runs
 198
 199                 </div>
 200                         </div>
 201
 202
 203
 204                     </td>
 205                     <td class="msource">
 206
 207                         Roo.Fx
 208
 209                     </td>
 210                 </tr>
 211
 212
 213                 <tr class="config-row expandable config-row-alt1 notInherited">
 214                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 215                     <td class="sig">
 216
 217                         <a id="Roo.Fx-cfg-callback" name=".callback"></a>
 218                         <div class="fixedFont">
 219                                 <b  class="itemname">callback</b> : <a href="./Function.html#constructor" roo:cls="Function.html#constructor">Function</a>
 220
 221
 222                         </div>
 223
 224                         <div class="mdesc">
 225                             <div class="short">A function called when the effect is finished</div>
 226                         </div>
 227
 228                         <div class="mdesc">
 229                             <div class="long">
 230                     A function called when the effect is finished
 231
 232                 </div>
 233                         </div>
 234
 235
 236
 237                     </td>
 238                     <td class="msource">
 239
 240                         Roo.Fx
 241
 242                     </td>
 243                 </tr>
 244
 245
 246                 <tr class="config-row expandable config-row-alt0 notInherited">
 247                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 248                     <td class="sig">
 249
 250                         <a id="Roo.Fx-cfg-concurrent" name=".concurrent"></a>
 251                         <div class="fixedFont">
 252                                 <b  class="itemname">concurrent</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 253
 254
 255                         </div>
 256
 257                         <div class="mdesc">
 258                             <div class="short">Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence</div>
 259                         </div>
 260
 261                         <div class="mdesc">
 262                             <div class="long">
 263                     Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
 264
 265                 </div>
 266                         </div>
 267
 268
 269
 270                     </td>
 271                     <td class="msource">
 272
 273                         Roo.Fx
 274
 275                     </td>
 276                 </tr>
 277
 278
 279                 <tr class="config-row expandable config-row-alt1 notInherited">
 280                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 281                     <td class="sig">
 282
 283                         <a id="Roo.Fx-cfg-duration" name=".duration"></a>
 284                         <div class="fixedFont">
 285                                 <b  class="itemname">duration</b> : <a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>
 286
 287
 288                         </div>
 289
 290                         <div class="mdesc">
 291                             <div class="short">The length of time (in seconds) that the effect should last</div>
 292                         </div>
 293
 294                         <div class="mdesc">
 295                             <div class="long">
 296                     The length of time (in seconds) that the effect should last
 297
 298                 </div>
 299                         </div>
 300
 301
 302
 303                     </td>
 304                     <td class="msource">
 305
 306                         Roo.Fx
 307
 308                     </td>
 309                 </tr>
 310
 311
 312                 <tr class="config-row expandable config-row-alt0 notInherited">
 313                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 314                     <td class="sig">
 315
 316                         <a id="Roo.Fx-cfg-easing" name=".easing"></a>
 317                         <div class="fixedFont">
 318                                 <b  class="itemname">easing</b> : <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>
 319
 320
 321                         </div>
 322
 323                         <div class="mdesc">
 324                             <div class="short">A valid Easing value for the effect</div>
 325                         </div>
 326
 327                         <div class="mdesc">
 328                             <div class="long">
 329                     A valid Easing value for the effect
 330
 331                 </div>
 332                         </div>
 333
 334
 335
 336                     </td>
 337                     <td class="msource">
 338
 339                         Roo.Fx
 340
 341                     </td>
 342                 </tr>
 343
 344
 345                 <tr class="config-row expandable config-row-alt1 notInherited">
 346                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 347                     <td class="sig">
 348
 349                         <a id="Roo.Fx-cfg-remove" name=".remove"></a>
 350                         <div class="fixedFont">
 351                                 <b  class="itemname">remove</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 352
 353
 354                         </div>
 355
 356                         <div class="mdesc">
 357                             <div class="short">Whether the Element should be removed from the DOM and destroyed after the effect finishes</div>
 358                         </div>
 359
 360                         <div class="mdesc">
 361                             <div class="long">
 362                     Whether the Element should be removed from the DOM and destroyed after the effect finishes
 363
 364                 </div>
 365                         </div>
 366
 367
 368
 369                     </td>
 370                     <td class="msource">
 371
 372                         Roo.Fx
 373
 374                     </td>
 375                 </tr>
 376
 377
 378                 <tr class="config-row expandable config-row-alt0 notInherited">
 379                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 380                     <td class="sig">
 381
 382                         <a id="Roo.Fx-cfg-scope" name=".scope"></a>
 383                         <div class="fixedFont">
 384                                 <b  class="itemname">scope</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>
 385
 386
 387                         </div>
 388
 389                         <div class="mdesc">
 390                             <div class="short">The scope of the effect function</div>
 391                         </div>
 392
 393                         <div class="mdesc">
 394                             <div class="long">
 395                     The scope of the effect function
 396
 397                 </div>
 398                         </div>
 399
 400
 401
 402                     </td>
 403                     <td class="msource">
 404
 405                         Roo.Fx
 406
 407                     </td>
 408                 </tr>
 409
 410
 411                 <tr class="config-row expandable config-row-alt1 notInherited">
 412                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 413                     <td class="sig">
 414
 415                         <a id="Roo.Fx-cfg-stopFx" name=".stopFx"></a>
 416                         <div class="fixedFont">
 417                                 <b  class="itemname">stopFx</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 418
 419
 420                         </div>
 421
 422                         <div class="mdesc">
 423                             <div class="short">Whether subsequent effects should be stopped and removed after the current effect finishes</div>
 424                         </div>
 425
 426                         <div class="mdesc">
 427                             <div class="long">
 428                     Whether subsequent effects should be stopped and removed after the current effect finishes
 429
 430                 </div>
 431                         </div>
 432
 433
 434
 435                     </td>
 436                     <td class="msource">
 437
 438                         Roo.Fx
 439
 440                     </td>
 441                 </tr>
 442
 443
 444                 <tr class="config-row expandable config-row-alt0 notInherited">
 445                    <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 446                     <td class="sig">
 447
 448                         <a id="Roo.Fx-cfg-useDisplay" name=".useDisplay"></a>
 449                         <div class="fixedFont">
 450                                 <b  class="itemname">useDisplay</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 451
 452
 453                         </div>
 454
 455                         <div class="mdesc">
 456                             <div class="short">Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to <br/>effects that end with the element being visually hidden, ignored otherwise)</div>
 457                         </div>
 458
 459                         <div class="mdesc">
 460                             <div class="long">
 461                     Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to <br/>effects that end with the element being visually hidden, ignored otherwise)
 462
 463                 </div>
 464                         </div>
 465
 466
 467
 468                     </td>
 469                     <td class="msource">
 470
 471                         Roo.Fx
 472
 473                     </td>
 474                 </tr>
 475
 476
 477     </table>
 478
 479
 480
 481
 482
 483
 484
 485
 486
 487   <!-- ============================== public properties ==================== -->
 488
 489
 490
 491     <a id="Roo.Fx-props"></a>
 492
 493
 494
 495
 496
 497      <table cellspacing="0" class="member-table">
 498       <caption class="Empty">Public Properties - Has None</caption>
 499      </table>
 500
 501
 502
 503
 504   <!-- ============================== methods summary / details ======================== -->
 505
 506
 507   <a id="Roo.Fx-methods"></a>
 508         <!-- constructor?? -->
 509
 510         <!-- static's first
 511
 512
 513         -->
 514
 515         <!-- then dynamics first -->
 516
 517
 518
 519
 520
 521
 522       <table cellspacing="0" class="member-table">
 523       <caption>Public Methods</caption>
 524         <tr>
 525             <th class="sig-header" colspan="2">Method</th>
 526             <th class="msource-header">Defined By</th>
 527
 528         </tr>
 529
 530
 531
 532
 533
 534
 535
 536           <tr class="method-row config-row-alt0 notInherited">
 537             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 538
 539
 540             <td class="sig">
 541                 <a id="Roo-method-Fx"   name=".Fx"></a>
 542                 <div class="fixedFont">
 543                         <span class="attributes">new <B>Roo.</B></span><b class="itemname">Fx</b>
 544
 545                                  ()
 546
 547
 548
 549                 </div>
 550                 <div class="mdesc">
 551
 552
 553                         <div class="short">Create a new Roo.Fx</div>
 554
 555
 556                     <div class="long">
 557
 558
 559
 560                                 Create a new Roo.Fx
 561
 562
 563
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573                     </div>
 574                 </div>
 575
 576             </td>
 577             <td class="msource">
 578                 &nbsp;
 579             </td>
 580         </tr>
 581
 582
 583           <tr class="method-row config-row-alt1 expandable notInherited">
 584             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 585
 586
 587             <td class="sig">
 588                 <a id="Roo.Fx-method-fadeIn"   name=".fadeIn"></a>
 589                 <div class="fixedFont">
 590                         <span class="attributes">Roo.Fx.</span><b class="itemname">fadeIn</b>
 591
 592                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
 593
 594
 595                                          :
 596
 597
 598                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
 599
 600
 601
 602
 603
 604                 </div>
 605                 <div class="mdesc">
 606
 607                    <div class="short">Fade an element in (from transparent to opaque).</div>
 608
 609
 610
 611                     <div class="long">
 612
 613                                 Fade an element in (from transparent to opaque).  The ending opacity can be specified<br/>using the "endOpacity" config option.<br/>Usage:<br/><pre><code><br/>// default: fade in from opacity 0 to 100%<br/>el.fadeIn();<br/><br/>// custom: fade in from opacity 0 to 75% over 2 seconds<br/>el.fadeIn({ endOpacity: .75, duration: 2});<br/><br/>// common config options shown with default values<br/>el.fadeIn({<br/>    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)<br/>    easing: 'easeOut',<br/>    duration: .5<br/>});<br/></code></pre>
 614
 615
 616
 617
 618
 619
 620                                 <dl class="detailList">
 621                                 <dt class="heading">Parameters:</dt>
 622
 623                                         <dt>
 624                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
 625
 626                                         </dt>
 627                                         <dd>(optional) Object literal with any of the Fx config options</dd>
 628
 629                                 </dl>
 630
 631
 632
 633
 634
 635                                 <dl class="detailList">
 636                                 <dt class="heading">Returns:</dt>
 637
 638                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
 639
 640                                 </dl>
 641
 642
 643
 644
 645
 646
 647
 648                     </div>
 649                 </div>
 650
 651             </td>
 652             <td class="msource">
 653
 654                         Roo.Fx
 655                 &nbsp;
 656             </td>
 657         </tr>
 658
 659
 660           <tr class="method-row config-row-alt0 expandable notInherited">
 661             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 662
 663
 664             <td class="sig">
 665                 <a id="Roo.Fx-method-fadeOut"   name=".fadeOut"></a>
 666                 <div class="fixedFont">
 667                         <span class="attributes">Roo.Fx.</span><b class="itemname">fadeOut</b>
 668
 669                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
 670
 671
 672                                          :
 673
 674
 675                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
 676
 677
 678
 679
 680
 681                 </div>
 682                 <div class="mdesc">
 683
 684                    <div class="short">Fade an element out (from opaque to transparent).</div>
 685
 686
 687
 688                     <div class="long">
 689
 690                                 Fade an element out (from opaque to transparent).  The ending opacity can be specified<br/>using the "endOpacity" config option.<br/>Usage:<br/><pre><code><br/>// default: fade out from the element's current opacity to 0<br/>el.fadeOut();<br/><br/>// custom: fade out from the element's current opacity to 25% over 2 seconds<br/>el.fadeOut({ endOpacity: .25, duration: 2});<br/><br/>// common config options shown with default values<br/>el.fadeOut({<br/>    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)<br/>    easing: 'easeOut',<br/>    duration: .5<br/>    remove: false,<br/>    useDisplay: false<br/>});<br/></code></pre>
 691
 692
 693
 694
 695
 696
 697                                 <dl class="detailList">
 698                                 <dt class="heading">Parameters:</dt>
 699
 700                                         <dt>
 701                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
 702
 703                                         </dt>
 704                                         <dd>(optional) Object literal with any of the Fx config options</dd>
 705
 706                                 </dl>
 707
 708
 709
 710
 711
 712                                 <dl class="detailList">
 713                                 <dt class="heading">Returns:</dt>
 714
 715                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
 716
 717                                 </dl>
 718
 719
 720
 721
 722
 723
 724
 725                     </div>
 726                 </div>
 727
 728             </td>
 729             <td class="msource">
 730
 731                         Roo.Fx
 732                 &nbsp;
 733             </td>
 734         </tr>
 735
 736
 737           <tr class="method-row config-row-alt1 expandable notInherited">
 738             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 739
 740
 741             <td class="sig">
 742                 <a id="Roo.Fx-method-frame"   name=".frame"></a>
 743                 <div class="fixedFont">
 744                         <span class="attributes">Roo.Fx.</span><b class="itemname">frame</b>
 745
 746                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>color</i></B>, <a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>count</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
 747
 748
 749                                          :
 750
 751
 752                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
 753
 754
 755
 756
 757
 758                 </div>
 759                 <div class="mdesc">
 760
 761                    <div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.</div>
 762
 763
 764
 765                     <div class="long">
 766
 767                                 Shows a ripple of exploding, attenuating borders to draw attention to an Element.<br/>Usage:<br/><pre><code><br/>// default: a single light blue ripple<br/>el.frame();<br/><br/>// custom: 3 red ripples lasting 3 seconds total<br/>el.frame("ff0000", 3, { duration: 3 });<br/><br/>// common config options shown with default values<br/>el.frame("C3DAF9", 1, {<br/>    duration: 1 //duration of entire animation (not each individual ripple)<br/>    // Note: Easing is not configurable and will be ignored if included<br/>});<br/></code></pre>
 768
 769
 770
 771
 772
 773
 774                                 <dl class="detailList">
 775                                 <dt class="heading">Parameters:</dt>
 776
 777                                         <dt>
 778                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>color</b>
 779
 780                                         </dt>
 781                                         <dd>(optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').</dd>
 782
 783                                         <dt>
 784                                                 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span>  <b>count</b>
 785
 786                                         </dt>
 787                                         <dd>(optional) The number of ripples to display (defaults to 1)</dd>
 788
 789                                         <dt>
 790                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
 791
 792                                         </dt>
 793                                         <dd>(optional) Object literal with any of the Fx config options</dd>
 794
 795                                 </dl>
 796
 797
 798
 799
 800
 801                                 <dl class="detailList">
 802                                 <dt class="heading">Returns:</dt>
 803
 804                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
 805
 806                                 </dl>
 807
 808
 809
 810
 811
 812
 813
 814                     </div>
 815                 </div>
 816
 817             </td>
 818             <td class="msource">
 819
 820                         Roo.Fx
 821                 &nbsp;
 822             </td>
 823         </tr>
 824
 825
 826           <tr class="method-row config-row-alt0 expandable notInherited">
 827             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 828
 829
 830             <td class="sig">
 831                 <a id="Roo.Fx-method-ghost"   name=".ghost"></a>
 832                 <div class="fixedFont">
 833                         <span class="attributes">Roo.Fx.</span><b class="itemname">ghost</b>
 834
 835                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>anchor</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
 836
 837
 838                                          :
 839
 840
 841                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
 842
 843
 844
 845
 846
 847                 </div>
 848                 <div class="mdesc">
 849
 850                    <div class="short">Slides the element while fading it out of view.</div>
 851
 852
 853
 854                     <div class="long">
 855
 856                                 Slides the element while fading it out of view.  An anchor point can be optionally passed to set the <br/>ending point of the effect.<br/>Usage:<br/><pre><code><br/>// default: slide the element downward while fading out<br/>el.ghost();<br/><br/>// custom: slide the element out to the right with a 2-second duration<br/>el.ghost('r', { duration: 2 });<br/><br/>// common config options shown with default values<br/>el.ghost('b', {<br/>    easing: 'easeOut',<br/>    duration: .5<br/>    remove: false,<br/>    useDisplay: false<br/>});<br/></code></pre>
 857
 858
 859
 860
 861
 862
 863                                 <dl class="detailList">
 864                                 <dt class="heading">Parameters:</dt>
 865
 866                                         <dt>
 867                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>anchor</b>
 868
 869                                         </dt>
 870                                         <dd>(optional) One of the valid Fx anchor positions (defaults to bottom: 'b')</dd>
 871
 872                                         <dt>
 873                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
 874
 875                                         </dt>
 876                                         <dd>(optional) Object literal with any of the Fx config options</dd>
 877
 878                                 </dl>
 879
 880
 881
 882
 883
 884                                 <dl class="detailList">
 885                                 <dt class="heading">Returns:</dt>
 886
 887                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
 888
 889                                 </dl>
 890
 891
 892
 893
 894
 895
 896
 897                     </div>
 898                 </div>
 899
 900             </td>
 901             <td class="msource">
 902
 903                         Roo.Fx
 904                 &nbsp;
 905             </td>
 906         </tr>
 907
 908
 909           <tr class="method-row config-row-alt1 expandable notInherited">
 910             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 911
 912
 913             <td class="sig">
 914                 <a id="Roo.Fx-method-hasActiveFx"   name=".hasActiveFx"></a>
 915                 <div class="fixedFont">
 916                         <span class="attributes">Roo.Fx.</span><b class="itemname">hasActiveFx</b>
 917
 918                                  ()
 919
 920
 921                                          :
 922
 923
 924                                                 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 925
 926
 927
 928
 929
 930                 </div>
 931                 <div class="mdesc">
 932
 933                    <div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div>
 934
 935
 936
 937                     <div class="long">
 938
 939                                 Returns true if the element has any effects actively running or queued, else returns false.
 940
 941
 942
 943
 944
 945
 946
 947
 948
 949
 950                                 <dl class="detailList">
 951                                 <dt class="heading">Returns:</dt>
 952
 953                                         <dd><span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span>  True if element has active effects, else false</dd>
 954
 955                                 </dl>
 956
 957
 958
 959
 960
 961
 962
 963                     </div>
 964                 </div>
 965
 966             </td>
 967             <td class="msource">
 968
 969                         Roo.Fx
 970                 &nbsp;
 971             </td>
 972         </tr>
 973
 974
 975           <tr class="method-row config-row-alt0 expandable notInherited">
 976             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 977
 978
 979             <td class="sig">
 980                 <a id="Roo.Fx-method-hasFxBlock"   name=".hasFxBlock"></a>
 981                 <div class="fixedFont">
 982                         <span class="attributes">Roo.Fx.</span><b class="itemname">hasFxBlock</b>
 983
 984                                  ()
 985
 986
 987                                          :
 988
 989
 990                                                 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 991
 992
 993
 994
 995
 996                 </div>
 997                 <div class="mdesc">
 998
 999                    <div class="short">Returns true if the element is currently blocking so that no other effect can be queued<br/>until this effect is finished, else returns false if blocking is not set.</div>
1000
1001
1002
1003                     <div class="long">
1004
1005                                 Returns true if the element is currently blocking so that no other effect can be queued<br/>until this effect is finished, else returns false if blocking is not set.  This is commonly<br/>used to ensure that an effect initiated by a user action runs to completion prior to the<br/>same effect being restarted (e.g., firing only one effect even if the user clicks several times).
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016                                 <dl class="detailList">
1017                                 <dt class="heading">Returns:</dt>
1018
1019                                         <dd><span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span>  True if blocking, else false</dd>
1020
1021                                 </dl>
1022
1023
1024
1025
1026
1027
1028
1029                     </div>
1030                 </div>
1031
1032             </td>
1033             <td class="msource">
1034
1035                         Roo.Fx
1036                 &nbsp;
1037             </td>
1038         </tr>
1039
1040
1041           <tr class="method-row config-row-alt1 expandable notInherited">
1042             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1043
1044
1045             <td class="sig">
1046                 <a id="Roo.Fx-method-highlight"   name=".highlight"></a>
1047                 <div class="fixedFont">
1048                         <span class="attributes">Roo.Fx.</span><b class="itemname">highlight</b>
1049
1050                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>color</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1051
1052
1053                                          :
1054
1055
1056                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1057
1058
1059
1060
1061
1062                 </div>
1063                 <div class="mdesc">
1064
1065                    <div class="short">Highlights the Element by setting a color (applies to the background-color by default, but can be<br/>changed using the "attr" config option) and then fading back to the original color.</div>
1066
1067
1068
1069                     <div class="long">
1070
1071                                 Highlights the Element by setting a color (applies to the background-color by default, but can be<br/>changed using the "attr" config option) and then fading back to the original color. If no original<br/>color is available, you should provide the "endColor" config option which will be cleared after the animation.<br/>Usage:<br/><pre><code><br/>// default: highlight background to yellow<br/>el.highlight();<br/><br/>// custom: highlight foreground text to blue for 2 seconds<br/>el.highlight("0000ff", { attr: 'color', duration: 2 });<br/><br/>// common config options shown with default values<br/>el.highlight("ffff9c", {<br/>    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value<br/>    endColor: (current color) or "ffffff",<br/>    easing: 'easeIn',<br/>    duration: 1<br/>});<br/></code></pre>
1072
1073
1074
1075
1076
1077
1078                                 <dl class="detailList">
1079                                 <dt class="heading">Parameters:</dt>
1080
1081                                         <dt>
1082                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>color</b>
1083
1084                                         </dt>
1085                                         <dd>(optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')</dd>
1086
1087                                         <dt>
1088                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1089
1090                                         </dt>
1091                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1092
1093                                 </dl>
1094
1095
1096
1097
1098
1099                                 <dl class="detailList">
1100                                 <dt class="heading">Returns:</dt>
1101
1102                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1103
1104                                 </dl>
1105
1106
1107
1108
1109
1110
1111
1112                     </div>
1113                 </div>
1114
1115             </td>
1116             <td class="msource">
1117
1118                         Roo.Fx
1119                 &nbsp;
1120             </td>
1121         </tr>
1122
1123
1124           <tr class="method-row config-row-alt0 expandable notInherited">
1125             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1126
1127
1128             <td class="sig">
1129                 <a id="Roo.Fx-method-pause"   name=".pause"></a>
1130                 <div class="fixedFont">
1131                         <span class="attributes">Roo.Fx.</span><b class="itemname">pause</b>
1132
1133                                  (<a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>seconds</i></B>)
1134
1135
1136                                          :
1137
1138
1139                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1140
1141
1142
1143
1144
1145                 </div>
1146                 <div class="mdesc">
1147
1148                    <div class="short">Creates a pause before any subsequent queued effects begin.</div>
1149
1150
1151
1152                     <div class="long">
1153
1154                                 Creates a pause before any subsequent queued effects begin.  If there are<br/>no effects queued after the pause it will have no effect.<br/>Usage:<br/><pre><code><br/>el.pause(1);<br/></code></pre>
1155
1156
1157
1158
1159
1160
1161                                 <dl class="detailList">
1162                                 <dt class="heading">Parameters:</dt>
1163
1164                                         <dt>
1165                                                 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span>  <b>seconds</b>
1166
1167                                         </dt>
1168                                         <dd>The length of time to pause (in seconds)</dd>
1169
1170                                 </dl>
1171
1172
1173
1174
1175
1176                                 <dl class="detailList">
1177                                 <dt class="heading">Returns:</dt>
1178
1179                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1180
1181                                 </dl>
1182
1183
1184
1185
1186
1187
1188
1189                     </div>
1190                 </div>
1191
1192             </td>
1193             <td class="msource">
1194
1195                         Roo.Fx
1196                 &nbsp;
1197             </td>
1198         </tr>
1199
1200
1201           <tr class="method-row config-row-alt1 expandable notInherited">
1202             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1203
1204
1205             <td class="sig">
1206                 <a id="Roo.Fx-method-puff"   name=".puff"></a>
1207                 <div class="fixedFont">
1208                         <span class="attributes">Roo.Fx.</span><b class="itemname">puff</b>
1209
1210                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1211
1212
1213                                          :
1214
1215
1216                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1217
1218
1219
1220
1221
1222                 </div>
1223                 <div class="mdesc">
1224
1225                    <div class="short">Fades the element out while slowly expanding it in all directions.</div>
1226
1227
1228
1229                     <div class="long">
1230
1231                                 Fades the element out while slowly expanding it in all directions.  When the effect is completed, the <br/>element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. <br/>The element must be removed from the DOM using the 'remove' config option if desired.<br/>Usage:<br/><pre><code><br/>// default<br/>el.puff();<br/><br/>// common config options shown with default values<br/>el.puff({<br/>    easing: 'easeOut',<br/>    duration: .5,<br/>    remove: false,<br/>    useDisplay: false<br/>});<br/></code></pre>
1232
1233
1234
1235
1236
1237
1238                                 <dl class="detailList">
1239                                 <dt class="heading">Parameters:</dt>
1240
1241                                         <dt>
1242                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1243
1244                                         </dt>
1245                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1246
1247                                 </dl>
1248
1249
1250
1251
1252
1253                                 <dl class="detailList">
1254                                 <dt class="heading">Returns:</dt>
1255
1256                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1257
1258                                 </dl>
1259
1260
1261
1262
1263
1264
1265
1266                     </div>
1267                 </div>
1268
1269             </td>
1270             <td class="msource">
1271
1272                         Roo.Fx
1273                 &nbsp;
1274             </td>
1275         </tr>
1276
1277
1278           <tr class="method-row config-row-alt0 expandable notInherited">
1279             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1280
1281
1282             <td class="sig">
1283                 <a id="Roo.Fx-method-scale"   name=".scale"></a>
1284                 <div class="fixedFont">
1285                         <span class="attributes">Roo.Fx.</span><b class="itemname">scale</b>
1286
1287                                  (<a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>width</i></B>, <a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>height</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1288
1289
1290                                          :
1291
1292
1293                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1294
1295
1296
1297
1298
1299                 </div>
1300                 <div class="mdesc">
1301
1302                    <div class="short">Animates the transition of an element's dimensions from a starting height/width<br/>to an ending height/width.</div>
1303
1304
1305
1306                     <div class="long">
1307
1308                                 Animates the transition of an element's dimensions from a starting height/width<br/>to an ending height/width.<br/>Usage:<br/><pre><code><br/>// change height and width to 100x100 pixels<br/>el.scale(100, 100);<br/><br/>// common config options shown with default values.  The height and width will default to<br/>// the element's existing values if passed as null.<br/>el.scale(<br/>    [element's width],<br/>    [element's height], {<br/>    easing: 'easeOut',<br/>    duration: .35<br/>});<br/></code></pre>
1309
1310
1311
1312
1313
1314
1315                                 <dl class="detailList">
1316                                 <dt class="heading">Parameters:</dt>
1317
1318                                         <dt>
1319                                                 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span>  <b>width</b>
1320
1321                                         </dt>
1322                                         <dd>The new width (pass undefined to keep the original width)</dd>
1323
1324                                         <dt>
1325                                                 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span>  <b>height</b>
1326
1327                                         </dt>
1328                                         <dd>The new height (pass undefined to keep the original height)</dd>
1329
1330                                         <dt>
1331                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1332
1333                                         </dt>
1334                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1335
1336                                 </dl>
1337
1338
1339
1340
1341
1342                                 <dl class="detailList">
1343                                 <dt class="heading">Returns:</dt>
1344
1345                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1346
1347                                 </dl>
1348
1349
1350
1351
1352
1353
1354
1355                     </div>
1356                 </div>
1357
1358             </td>
1359             <td class="msource">
1360
1361                         Roo.Fx
1362                 &nbsp;
1363             </td>
1364         </tr>
1365
1366
1367           <tr class="method-row config-row-alt1 expandable notInherited">
1368             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1369
1370
1371             <td class="sig">
1372                 <a id="Roo.Fx-method-sequenceFx"   name=".sequenceFx"></a>
1373                 <div class="fixedFont">
1374                         <span class="attributes">Roo.Fx.</span><b class="itemname">sequenceFx</b>
1375
1376                                  ()
1377
1378
1379                                          :
1380
1381
1382                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1383
1384
1385
1386
1387
1388                 </div>
1389                 <div class="mdesc">
1390
1391                    <div class="short">Ensures that all effects queued after sequenceFx is called on the element are<br/>run in sequence.</div>
1392
1393
1394
1395                     <div class="long">
1396
1397                                 Ensures that all effects queued after sequenceFx is called on the element are<br/>run in sequence.  This is the opposite of {<b>link</b> <b>syncFx</b>}.
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408                                 <dl class="detailList">
1409                                 <dt class="heading">Returns:</dt>
1410
1411                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1412
1413                                 </dl>
1414
1415
1416
1417
1418
1419
1420
1421                     </div>
1422                 </div>
1423
1424             </td>
1425             <td class="msource">
1426
1427                         Roo.Fx
1428                 &nbsp;
1429             </td>
1430         </tr>
1431
1432
1433           <tr class="method-row config-row-alt0 expandable notInherited">
1434             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1435
1436
1437             <td class="sig">
1438                 <a id="Roo.Fx-method-shift"   name=".shift"></a>
1439                 <div class="fixedFont">
1440                         <span class="attributes">Roo.Fx.</span><b class="itemname">shift</b>
1441
1442                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1443
1444
1445                                          :
1446
1447
1448                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1449
1450
1451
1452
1453
1454                 </div>
1455                 <div class="mdesc">
1456
1457                    <div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.</div>
1458
1459
1460
1461                     <div class="long">
1462
1463                                 Animates the transition of any combination of an element's dimensions, xy position and/or opacity.<br/>Any of these properties not specified in the config object will not be changed.  This effect <br/>requires that at least one new dimension, position or opacity setting must be passed in on<br/>the config object in order for the function to have any effect.<br/>Usage:<br/><pre><code><br/>// slide the element horizontally to x position 200 while changing the height and opacity<br/>el.shift({ x: 200, height: 50, opacity: .8 });<br/><br/>// common config options shown with default values.<br/>el.shift({<br/>    width: [element's width],<br/>    height: [element's height],<br/>    x: [element's x position],<br/>    y: [element's y position],<br/>    opacity: [element's opacity],<br/>    easing: 'easeOut',<br/>    duration: .35<br/>});<br/></code></pre>
1464
1465
1466
1467
1468
1469
1470                                 <dl class="detailList">
1471                                 <dt class="heading">Parameters:</dt>
1472
1473                                         <dt>
1474                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1475
1476                                         </dt>
1477                                         <dd>Object literal with any of the Fx config options</dd>
1478
1479                                 </dl>
1480
1481
1482
1483
1484
1485                                 <dl class="detailList">
1486                                 <dt class="heading">Returns:</dt>
1487
1488                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1489
1490                                 </dl>
1491
1492
1493
1494
1495
1496
1497
1498                     </div>
1499                 </div>
1500
1501             </td>
1502             <td class="msource">
1503
1504                         Roo.Fx
1505                 &nbsp;
1506             </td>
1507         </tr>
1508
1509
1510           <tr class="method-row config-row-alt1 expandable notInherited">
1511             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1512
1513
1514             <td class="sig">
1515                 <a id="Roo.Fx-method-slideIn"   name=".slideIn"></a>
1516                 <div class="fixedFont">
1517                         <span class="attributes">Roo.Fx.</span><b class="itemname">slideIn</b>
1518
1519                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>anchor</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1520
1521
1522                                          :
1523
1524
1525                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1526
1527
1528
1529
1530
1531                 </div>
1532                 <div class="mdesc">
1533
1534                    <div class="short">Slides the element into view.</div>
1535
1536
1537
1538                     <div class="long">
1539
1540                                 Slides the element into view.  An anchor point can be optionally passed to set the point of<br/>origin for the slide effect.  This function automatically handles wrapping the element with<br/>a fixed-size container if needed.  See the Fx class overview for valid anchor point options.<br/>Usage:<br/><pre><code><br/>// default: slide the element in from the top<br/>el.slideIn();<br/><br/>// custom: slide the element in from the right with a 2-second duration<br/>el.slideIn('r', { duration: 2 });<br/><br/>// common config options shown with default values<br/>el.slideIn('t', {<br/>    easing: 'easeOut',<br/>    duration: .5<br/>});<br/></code></pre>
1541
1542
1543
1544
1545
1546
1547                                 <dl class="detailList">
1548                                 <dt class="heading">Parameters:</dt>
1549
1550                                         <dt>
1551                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>anchor</b>
1552
1553                                         </dt>
1554                                         <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
1555
1556                                         <dt>
1557                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1558
1559                                         </dt>
1560                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1561
1562                                 </dl>
1563
1564
1565
1566
1567
1568                                 <dl class="detailList">
1569                                 <dt class="heading">Returns:</dt>
1570
1571                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1572
1573                                 </dl>
1574
1575
1576
1577
1578
1579
1580
1581                     </div>
1582                 </div>
1583
1584             </td>
1585             <td class="msource">
1586
1587                         Roo.Fx
1588                 &nbsp;
1589             </td>
1590         </tr>
1591
1592
1593           <tr class="method-row config-row-alt0 expandable notInherited">
1594             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1595
1596
1597             <td class="sig">
1598                 <a id="Roo.Fx-method-slideOut"   name=".slideOut"></a>
1599                 <div class="fixedFont">
1600                         <span class="attributes">Roo.Fx.</span><b class="itemname">slideOut</b>
1601
1602                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>anchor</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1603
1604
1605                                          :
1606
1607
1608                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1609
1610
1611
1612
1613
1614                 </div>
1615                 <div class="mdesc">
1616
1617                    <div class="short">Slides the element out of view.</div>
1618
1619
1620
1621                     <div class="long">
1622
1623                                 Slides the element out of view.  An anchor point can be optionally passed to set the end point<br/>for the slide effect.  When the effect is completed, the element will be hidden (visibility = <br/>'hidden') but block elements will still take up space in the document.  The element must be removed<br/>from the DOM using the 'remove' config option if desired.  This function automatically handles <br/>wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.<br/>Usage:<br/><pre><code><br/>// default: slide the element out to the top<br/>el.slideOut();<br/><br/>// custom: slide the element out to the right with a 2-second duration<br/>el.slideOut('r', { duration: 2 });<br/><br/>// common config options shown with default values<br/>el.slideOut('t', {<br/>    easing: 'easeOut',<br/>    duration: .5,<br/>    remove: false,<br/>    useDisplay: false<br/>});<br/></code></pre>
1624
1625
1626
1627
1628
1629
1630                                 <dl class="detailList">
1631                                 <dt class="heading">Parameters:</dt>
1632
1633                                         <dt>
1634                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>anchor</b>
1635
1636                                         </dt>
1637                                         <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
1638
1639                                         <dt>
1640                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1641
1642                                         </dt>
1643                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1644
1645                                 </dl>
1646
1647
1648
1649
1650
1651                                 <dl class="detailList">
1652                                 <dt class="heading">Returns:</dt>
1653
1654                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1655
1656                                 </dl>
1657
1658
1659
1660
1661
1662
1663
1664                     </div>
1665                 </div>
1666
1667             </td>
1668             <td class="msource">
1669
1670                         Roo.Fx
1671                 &nbsp;
1672             </td>
1673         </tr>
1674
1675
1676           <tr class="method-row config-row-alt1 expandable notInherited">
1677             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1678
1679
1680             <td class="sig">
1681                 <a id="Roo.Fx-method-stopFx"   name=".stopFx"></a>
1682                 <div class="fixedFont">
1683                         <span class="attributes">Roo.Fx.</span><b class="itemname">stopFx</b>
1684
1685                                  ()
1686
1687
1688                                          :
1689
1690
1691                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1692
1693
1694
1695
1696
1697                 </div>
1698                 <div class="mdesc">
1699
1700                    <div class="short">Stops any running effects and clears the element's internal effects queue if it contains<br/>any additional effects that haven't started yet.</div>
1701
1702
1703
1704                     <div class="long">
1705
1706                                 Stops any running effects and clears the element's internal effects queue if it contains<br/>any additional effects that haven't started yet.
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717                                 <dl class="detailList">
1718                                 <dt class="heading">Returns:</dt>
1719
1720                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1721
1722                                 </dl>
1723
1724
1725
1726
1727
1728
1729
1730                     </div>
1731                 </div>
1732
1733             </td>
1734             <td class="msource">
1735
1736                         Roo.Fx
1737                 &nbsp;
1738             </td>
1739         </tr>
1740
1741
1742           <tr class="method-row config-row-alt0 expandable notInherited">
1743             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1744
1745
1746             <td class="sig">
1747                 <a id="Roo.Fx-method-switchOff"   name=".switchOff"></a>
1748                 <div class="fixedFont">
1749                         <span class="attributes">Roo.Fx.</span><b class="itemname">switchOff</b>
1750
1751                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1752
1753
1754                                          :
1755
1756
1757                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1758
1759
1760
1761
1762
1763                 </div>
1764                 <div class="mdesc">
1765
1766                    <div class="short">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).</div>
1767
1768
1769
1770                     <div class="long">
1771
1772                                 Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).<br/>When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still <br/>take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.<br/>Usage:<br/><pre><code><br/>// default<br/>el.switchOff();<br/><br/>// all config options shown with default values<br/>el.switchOff({<br/>    easing: 'easeIn',<br/>    duration: .3,<br/>    remove: false,<br/>    useDisplay: false<br/>});<br/></code></pre>
1773
1774
1775
1776
1777
1778
1779                                 <dl class="detailList">
1780                                 <dt class="heading">Parameters:</dt>
1781
1782                                         <dt>
1783                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>options</b>
1784
1785                                         </dt>
1786                                         <dd>(optional) Object literal with any of the Fx config options</dd>
1787
1788                                 </dl>
1789
1790
1791
1792
1793
1794                                 <dl class="detailList">
1795                                 <dt class="heading">Returns:</dt>
1796
1797                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1798
1799                                 </dl>
1800
1801
1802
1803
1804
1805
1806
1807                     </div>
1808                 </div>
1809
1810             </td>
1811             <td class="msource">
1812
1813                         Roo.Fx
1814                 &nbsp;
1815             </td>
1816         </tr>
1817
1818
1819           <tr class="method-row config-row-alt1 expandable notInherited">
1820             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
1821
1822
1823             <td class="sig">
1824                 <a id="Roo.Fx-method-syncFx"   name=".syncFx"></a>
1825                 <div class="fixedFont">
1826                         <span class="attributes">Roo.Fx.</span><b class="itemname">syncFx</b>
1827
1828                                  ()
1829
1830
1831                                          :
1832
1833
1834                                                 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1835
1836
1837
1838
1839
1840                 </div>
1841                 <div class="mdesc">
1842
1843                    <div class="short">Ensures that all effects queued after syncFx is called on the element are<br/>run concurrently.</div>
1844
1845
1846
1847                     <div class="long">
1848
1849                                 Ensures that all effects queued after syncFx is called on the element are<br/>run concurrently.  This is the opposite of {<b>link</b> <b>sequenceFx</b>}.
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860                                 <dl class="detailList">
1861                                 <dt class="heading">Returns:</dt>
1862
1863                                         <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span>  The Element</dd>
1864
1865                                 </dl>
1866
1867
1868
1869
1870
1871
1872
1873                     </div>
1874                 </div>
1875
1876             </td>
1877             <td class="msource">
1878
1879                         Roo.Fx
1880                 &nbsp;
1881             </td>
1882         </tr>
1883
1884
1885     </table>
1886
1887
1888   <!-- ============================== events summary / details ======================== -->
1889
1890
1891   <a id="Roo.Fx-events"></a>
1892
1893
1894
1895
1896
1897      <table cellspacing="0" class="member-table">
1898       <caption class="Empty">Events - Has None</caption>
1899      </table>
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909 <!-- ============================== footer ================================= -->
1910                 <div class="fineprint" style="clear:both">
1911
1912                         Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a>  on Fri Jul 13 2018 14:10:53 GMT+0800 (HKT)
1913                         Based on
1914                         <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>
1915                 </div>
1916         </body>
1917 </html>