1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
7 <meta http-equiv="content-type" content="text/html; charset=undefined" />
8 <meta name="generator" content="JsDoc Toolkit" />
11 <title>JsDoc Reference - Roo.Fx</title>
14 <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
15 <link rel="stylesheet" type="text/css" href="../default.css" />
18 <script type="text/javascript" src="../page.js">
25 <body onload="RooDocsPage.onload();">
28 <div class="body-wrap">
30 <!-- ============================== links to methods. ================================= -->
32 <div class="top-tools">
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>
43 <!-- ============================== inheritance Block. ================================= -->
45 <!-- ============================== class title / details ============================ -->
48 <h1 class="classTitle">
53 <table cellspacing="0" class="class-summary-table">
55 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
57 <tr><td class="label">Defined In:</td><td class="hd-info">
59 <a href="./src/Roo_Fx.js.html">Roo/Fx.js</a>.
62 <tr><td class="label">Class:</td><td class="hd-info">Fx</td></tr>
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>
76 <!-- ============================== Class comment block... ========================== -->
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>
82 <iframe frameborder="0" id="comments-Roo" style="border: none;width:100%;"
83 src="/blog.php/GtkDjsComments/Roo.Fx.html"></iframe>
88 <!-- ============================== config options ========================== -->
93 <div class="hr"></div>
94 <a id="Roo.Fx-configs"></a>
100 <table cellspacing="0" class="member-table">
101 <caption>Config Options (Usually are also Properties)</caption>
105 <th class="sig-header" colspan="2">Options</th>
107 <th class="msource-header">Defined By</th>
114 <tr class="config-row expandable config-row-alt0 notInherited">
115 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
126 <div class="short">A css class to apply after the effect</div>
131 A css class to apply after the effect
147 <tr class="config-row expandable config-row-alt1 notInherited">
148 <td class="micon"><a class="exi" href="#expand"> </a></td>
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
159 <div class="short">A style specification string, e.g.</div>
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
180 <tr class="config-row expandable config-row-alt0 notInherited">
181 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
192 <div class="short">Whether the effect should block other effects from queueing while it runs</div>
197 Whether the effect should block other effects from queueing while it runs
213 <tr class="config-row expandable config-row-alt1 notInherited">
214 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
225 <div class="short">A function called when the effect is finished</div>
230 A function called when the effect is finished
246 <tr class="config-row expandable config-row-alt0 notInherited">
247 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>
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
279 <tr class="config-row expandable config-row-alt1 notInherited">
280 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
291 <div class="short">The length of time (in seconds) that the effect should last</div>
296 The length of time (in seconds) that the effect should last
312 <tr class="config-row expandable config-row-alt0 notInherited">
313 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
324 <div class="short">A valid Easing value for the effect</div>
329 A valid Easing value for the effect
345 <tr class="config-row expandable config-row-alt1 notInherited">
346 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
357 <div class="short">Whether the Element should be removed from the DOM and destroyed after the effect finishes</div>
362 Whether the Element should be removed from the DOM and destroyed after the effect finishes
378 <tr class="config-row expandable config-row-alt0 notInherited">
379 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
390 <div class="short">The scope of the effect function</div>
395 The scope of the effect function
411 <tr class="config-row expandable config-row-alt1 notInherited">
412 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
423 <div class="short">Whether subsequent effects should be stopped and removed after the current effect finishes</div>
428 Whether subsequent effects should be stopped and removed after the current effect finishes
444 <tr class="config-row expandable config-row-alt0 notInherited">
445 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>
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)
487 <!-- ============================== public properties ==================== -->
491 <a id="Roo.Fx-props"></a>
497 <table cellspacing="0" class="member-table">
498 <caption class="Empty">Public Properties - Has None</caption>
504 <!-- ============================== methods summary / details ======================== -->
507 <a id="Roo.Fx-methods"></a>
508 <!-- constructor?? -->
515 <!-- then dynamics first -->
522 <table cellspacing="0" class="member-table">
523 <caption>Public Methods</caption>
525 <th class="sig-header" colspan="2">Method</th>
526 <th class="msource-header">Defined By</th>
536 <tr class="method-row config-row-alt0 notInherited">
537 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
553 <div class="short">Create a new Roo.Fx</div>
583 <tr class="method-row config-row-alt1 expandable notInherited">
584 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
592 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
598 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
607 <div class="short">Fade an element in (from transparent to opaque).</div>
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>
620 <dl class="detailList">
621 <dt class="heading">Parameters:</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>
627 <dd>(optional) Object literal with any of the Fx config options</dd>
635 <dl class="detailList">
636 <dt class="heading">Returns:</dt>
638 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
660 <tr class="method-row config-row-alt0 expandable notInherited">
661 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
669 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
675 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
684 <div class="short">Fade an element out (from opaque to transparent).</div>
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>
697 <dl class="detailList">
698 <dt class="heading">Parameters:</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>
704 <dd>(optional) Object literal with any of the Fx config options</dd>
712 <dl class="detailList">
713 <dt class="heading">Returns:</dt>
715 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
737 <tr class="method-row config-row-alt1 expandable notInherited">
738 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
752 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
761 <div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.</div>
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>
774 <dl class="detailList">
775 <dt class="heading">Parameters:</dt>
778 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>color</b>
781 <dd>(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').</dd>
784 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>count</b>
787 <dd>(optional) The number of ripples to display (defaults to 1)</dd>
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>
793 <dd>(optional) Object literal with any of the Fx config options</dd>
801 <dl class="detailList">
802 <dt class="heading">Returns:</dt>
804 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
826 <tr class="method-row config-row-alt0 expandable notInherited">
827 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
841 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
850 <div class="short">Slides the element while fading it out of view.</div>
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>
863 <dl class="detailList">
864 <dt class="heading">Parameters:</dt>
867 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
870 <dd>(optional) One of the valid Fx anchor positions (defaults to bottom: 'b')</dd>
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>
876 <dd>(optional) Object literal with any of the Fx config options</dd>
884 <dl class="detailList">
885 <dt class="heading">Returns:</dt>
887 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
909 <tr class="method-row config-row-alt1 expandable notInherited">
910 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
924 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
933 <div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div>
939 Returns true if the element has any effects actively running or queued, else returns false.
950 <dl class="detailList">
951 <dt class="heading">Returns:</dt>
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>
975 <tr class="method-row config-row-alt0 expandable notInherited">
976 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
990 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
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>
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).
1016 <dl class="detailList">
1017 <dt class="heading">Returns:</dt>
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>
1033 <td class="msource">
1041 <tr class="method-row config-row-alt1 expandable notInherited">
1042 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
1056 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
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>
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>
1078 <dl class="detailList">
1079 <dt class="heading">Parameters:</dt>
1082 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>color</b>
1085 <dd>(optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')</dd>
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>
1091 <dd>(optional) Object literal with any of the Fx config options</dd>
1099 <dl class="detailList">
1100 <dt class="heading">Returns:</dt>
1102 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1116 <td class="msource">
1124 <tr class="method-row config-row-alt0 expandable notInherited">
1125 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1133 (<a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>seconds</i></B>)
1139 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1148 <div class="short">Creates a pause before any subsequent queued effects begin.</div>
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>
1161 <dl class="detailList">
1162 <dt class="heading">Parameters:</dt>
1165 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>seconds</b>
1168 <dd>The length of time to pause (in seconds)</dd>
1176 <dl class="detailList">
1177 <dt class="heading">Returns:</dt>
1179 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1193 <td class="msource">
1201 <tr class="method-row config-row-alt1 expandable notInherited">
1202 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1210 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1216 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1225 <div class="short">Fades the element out while slowly expanding it in all directions.</div>
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>
1238 <dl class="detailList">
1239 <dt class="heading">Parameters:</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>
1245 <dd>(optional) Object literal with any of the Fx config options</dd>
1253 <dl class="detailList">
1254 <dt class="heading">Returns:</dt>
1256 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1270 <td class="msource">
1278 <tr class="method-row config-row-alt0 expandable notInherited">
1279 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
1293 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1302 <div class="short">Animates the transition of an element's dimensions from a starting height/width<br/>to an ending height/width.</div>
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>
1315 <dl class="detailList">
1316 <dt class="heading">Parameters:</dt>
1319 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>width</b>
1322 <dd>The new width (pass undefined to keep the original width)</dd>
1325 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>height</b>
1328 <dd>The new height (pass undefined to keep the original height)</dd>
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>
1334 <dd>(optional) Object literal with any of the Fx config options</dd>
1342 <dl class="detailList">
1343 <dt class="heading">Returns:</dt>
1345 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1359 <td class="msource">
1367 <tr class="method-row config-row-alt1 expandable notInherited">
1368 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1382 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1391 <div class="short">Ensures that all effects queued after sequenceFx is called on the element are<br/>run in sequence.</div>
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>}.
1408 <dl class="detailList">
1409 <dt class="heading">Returns:</dt>
1411 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1425 <td class="msource">
1433 <tr class="method-row config-row-alt0 expandable notInherited">
1434 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1442 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1448 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1457 <div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.</div>
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>
1470 <dl class="detailList">
1471 <dt class="heading">Parameters:</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>
1477 <dd>Object literal with any of the Fx config options</dd>
1485 <dl class="detailList">
1486 <dt class="heading">Returns:</dt>
1488 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1502 <td class="msource">
1510 <tr class="method-row config-row-alt1 expandable notInherited">
1511 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
1525 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1534 <div class="short">Slides the element into view.</div>
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>
1547 <dl class="detailList">
1548 <dt class="heading">Parameters:</dt>
1551 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
1554 <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
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>
1560 <dd>(optional) Object literal with any of the Fx config options</dd>
1568 <dl class="detailList">
1569 <dt class="heading">Returns:</dt>
1571 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1585 <td class="msource">
1593 <tr class="method-row config-row-alt0 expandable notInherited">
1594 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
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>)
1608 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1617 <div class="short">Slides the element out of view.</div>
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>
1630 <dl class="detailList">
1631 <dt class="heading">Parameters:</dt>
1634 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
1637 <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
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>
1643 <dd>(optional) Object literal with any of the Fx config options</dd>
1651 <dl class="detailList">
1652 <dt class="heading">Returns:</dt>
1654 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1668 <td class="msource">
1676 <tr class="method-row config-row-alt1 expandable notInherited">
1677 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1691 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
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>
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.
1717 <dl class="detailList">
1718 <dt class="heading">Returns:</dt>
1720 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1734 <td class="msource">
1742 <tr class="method-row config-row-alt0 expandable notInherited">
1743 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1751 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1757 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
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>
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>
1779 <dl class="detailList">
1780 <dt class="heading">Parameters:</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>
1786 <dd>(optional) Object literal with any of the Fx config options</dd>
1794 <dl class="detailList">
1795 <dt class="heading">Returns:</dt>
1797 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1811 <td class="msource">
1819 <tr class="method-row config-row-alt1 expandable notInherited">
1820 <td class="micon"><a class="exi" href="#expand"> </a></td>
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>
1834 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1843 <div class="short">Ensures that all effects queued after syncFx is called on the element are<br/>run concurrently.</div>
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>}.
1860 <dl class="detailList">
1861 <dt class="heading">Returns:</dt>
1863 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1877 <td class="msource">
1888 <!-- ============================== events summary / details ======================== -->
1891 <a id="Roo.Fx-events"></a>
1897 <table cellspacing="0" class="member-table">
1898 <caption class="Empty">Events - Has None</caption>
1909 <!-- ============================== footer ================================= -->
1910 <div class="fineprint" style="clear:both">
1912 Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a> on Mon Nov 06 2017 11:00:32 GMT+0800 (HKT)
1914 <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>