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>
130 <div class="long">A css class to apply after the effect</div>
144 <tr class="config-row expandable config-row-alt1 notInherited">
145 <td class="micon"><a class="exi" href="#expand"> </a></td>
148 <a id="Roo.Fx-cfg-afterStyle" name=".afterStyle"></a>
149 <div class="fixedFont">
150 <b class="itemname">afterStyle</b> : <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/Object/Function
156 <div class="short">A style specification string, e.g.</div>
160 <div class="long">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</div>
174 <tr class="config-row expandable config-row-alt0 notInherited">
175 <td class="micon"><a class="exi" href="#expand"> </a></td>
178 <a id="Roo.Fx-cfg-block" name=".block"></a>
179 <div class="fixedFont">
180 <b class="itemname">block</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
186 <div class="short">Whether the effect should block other effects from queueing while it runs</div>
190 <div class="long">Whether the effect should block other effects from queueing while it runs</div>
204 <tr class="config-row expandable config-row-alt1 notInherited">
205 <td class="micon"><a class="exi" href="#expand"> </a></td>
208 <a id="Roo.Fx-cfg-callback" name=".callback"></a>
209 <div class="fixedFont">
210 <b class="itemname">callback</b> : <a href="./Function.html#constructor" roo:cls="Function.html#constructor">Function</a>
216 <div class="short">A function called when the effect is finished</div>
220 <div class="long">A function called when the effect is finished</div>
234 <tr class="config-row expandable config-row-alt0 notInherited">
235 <td class="micon"><a class="exi" href="#expand"> </a></td>
238 <a id="Roo.Fx-cfg-concurrent" name=".concurrent"></a>
239 <div class="fixedFont">
240 <b class="itemname">concurrent</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
246 <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>
250 <div class="long">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>
264 <tr class="config-row expandable config-row-alt1 notInherited">
265 <td class="micon"><a class="exi" href="#expand"> </a></td>
268 <a id="Roo.Fx-cfg-duration" name=".duration"></a>
269 <div class="fixedFont">
270 <b class="itemname">duration</b> : <a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>
276 <div class="short">The length of time (in seconds) that the effect should last</div>
280 <div class="long">The length of time (in seconds) that the effect should last</div>
294 <tr class="config-row expandable config-row-alt0 notInherited">
295 <td class="micon"><a class="exi" href="#expand"> </a></td>
298 <a id="Roo.Fx-cfg-easing" name=".easing"></a>
299 <div class="fixedFont">
300 <b class="itemname">easing</b> : <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>
306 <div class="short">A valid Easing value for the effect</div>
310 <div class="long">A valid Easing value for the effect</div>
324 <tr class="config-row expandable config-row-alt1 notInherited">
325 <td class="micon"><a class="exi" href="#expand"> </a></td>
328 <a id="Roo.Fx-cfg-remove" name=".remove"></a>
329 <div class="fixedFont">
330 <b class="itemname">remove</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
336 <div class="short">Whether the Element should be removed from the DOM and destroyed after the effect finishes</div>
340 <div class="long">Whether the Element should be removed from the DOM and destroyed after the effect finishes</div>
354 <tr class="config-row expandable config-row-alt0 notInherited">
355 <td class="micon"><a class="exi" href="#expand"> </a></td>
358 <a id="Roo.Fx-cfg-scope" name=".scope"></a>
359 <div class="fixedFont">
360 <b class="itemname">scope</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>
366 <div class="short">The scope of the effect function</div>
370 <div class="long">The scope of the effect function</div>
384 <tr class="config-row expandable config-row-alt1 notInherited">
385 <td class="micon"><a class="exi" href="#expand"> </a></td>
388 <a id="Roo.Fx-cfg-stopFx" name=".stopFx"></a>
389 <div class="fixedFont">
390 <b class="itemname">stopFx</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
396 <div class="short">Whether subsequent effects should be stopped and removed after the current effect finishes</div>
400 <div class="long">Whether subsequent effects should be stopped and removed after the current effect finishes</div>
414 <tr class="config-row expandable config-row-alt0 notInherited">
415 <td class="micon"><a class="exi" href="#expand"> </a></td>
418 <a id="Roo.Fx-cfg-useDisplay" name=".useDisplay"></a>
419 <div class="fixedFont">
420 <b class="itemname">useDisplay</b> : <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
426 <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>
430 <div class="long">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>
454 <!-- ============================== public properties ==================== -->
458 <a id="Roo.Fx-props"></a>
464 <table cellspacing="0" class="member-table">
465 <caption class="Empty">Public Properties - Has None</caption>
471 <!-- ============================== methods summary / details ======================== -->
474 <a id="Roo.Fx-methods"></a>
475 <!-- constructor?? -->
482 <!-- then dynamics first -->
489 <table cellspacing="0" class="member-table">
490 <caption>Public Methods</caption>
492 <th class="sig-header" colspan="2">Method</th>
493 <th class="msource-header">Defined By</th>
503 <tr class="method-row config-row-alt0 notInherited">
504 <td class="micon"><a class="exi" href="#expand"> </a></td>
508 <a id="Roo-method-Fx" name=".Fx"></a>
509 <div class="fixedFont">
510 <span class="attributes">new <B>Roo.</B></span><b class="itemname">Fx</b>
520 <div class="short">Create a new Roo.Fx</div>
550 <tr class="method-row config-row-alt1 expandable notInherited">
551 <td class="micon"><a class="exi" href="#expand"> </a></td>
555 <a id="Roo.Fx-method-fadeIn" name=".fadeIn"></a>
556 <div class="fixedFont">
557 <span class="attributes">Roo.Fx.</span><b class="itemname">fadeIn</b>
559 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
565 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
574 <div class="short">Fade an element in (from transparent to opaque).</div>
580 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>
587 <dl class="detailList">
588 <dt class="heading">Parameters:</dt>
591 <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>
594 <dd>(optional) Object literal with any of the Fx config options</dd>
602 <dl class="detailList">
603 <dt class="heading">Returns:</dt>
605 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
627 <tr class="method-row config-row-alt0 expandable notInherited">
628 <td class="micon"><a class="exi" href="#expand"> </a></td>
632 <a id="Roo.Fx-method-fadeOut" name=".fadeOut"></a>
633 <div class="fixedFont">
634 <span class="attributes">Roo.Fx.</span><b class="itemname">fadeOut</b>
636 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
642 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
651 <div class="short">Fade an element out (from opaque to transparent).</div>
657 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>
664 <dl class="detailList">
665 <dt class="heading">Parameters:</dt>
668 <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>
671 <dd>(optional) Object literal with any of the Fx config options</dd>
679 <dl class="detailList">
680 <dt class="heading">Returns:</dt>
682 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
704 <tr class="method-row config-row-alt1 expandable notInherited">
705 <td class="micon"><a class="exi" href="#expand"> </a></td>
709 <a id="Roo.Fx-method-frame" name=".frame"></a>
710 <div class="fixedFont">
711 <span class="attributes">Roo.Fx.</span><b class="itemname">frame</b>
713 (<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>)
719 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
728 <div class="short">Shows a ripple of exploding, attenuating borders to draw attention to an Element.</div>
734 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>
741 <dl class="detailList">
742 <dt class="heading">Parameters:</dt>
745 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>color</b>
748 <dd>(optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').</dd>
751 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>count</b>
754 <dd>(optional) The number of ripples to display (defaults to 1)</dd>
757 <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>
760 <dd>(optional) Object literal with any of the Fx config options</dd>
768 <dl class="detailList">
769 <dt class="heading">Returns:</dt>
771 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
793 <tr class="method-row config-row-alt0 expandable notInherited">
794 <td class="micon"><a class="exi" href="#expand"> </a></td>
798 <a id="Roo.Fx-method-ghost" name=".ghost"></a>
799 <div class="fixedFont">
800 <span class="attributes">Roo.Fx.</span><b class="itemname">ghost</b>
802 (<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>)
808 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
817 <div class="short">Slides the element while fading it out of view.</div>
823 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>
830 <dl class="detailList">
831 <dt class="heading">Parameters:</dt>
834 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
837 <dd>(optional) One of the valid Fx anchor positions (defaults to bottom: 'b')</dd>
840 <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>
843 <dd>(optional) Object literal with any of the Fx config options</dd>
851 <dl class="detailList">
852 <dt class="heading">Returns:</dt>
854 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
876 <tr class="method-row config-row-alt1 expandable notInherited">
877 <td class="micon"><a class="exi" href="#expand"> </a></td>
881 <a id="Roo.Fx-method-hasActiveFx" name=".hasActiveFx"></a>
882 <div class="fixedFont">
883 <span class="attributes">Roo.Fx.</span><b class="itemname">hasActiveFx</b>
891 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
900 <div class="short">Returns true if the element has any effects actively running or queued, else returns false.</div>
906 Returns true if the element has any effects actively running or queued, else returns false.
917 <dl class="detailList">
918 <dt class="heading">Returns:</dt>
920 <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>
942 <tr class="method-row config-row-alt0 expandable notInherited">
943 <td class="micon"><a class="exi" href="#expand"> </a></td>
947 <a id="Roo.Fx-method-hasFxBlock" name=".hasFxBlock"></a>
948 <div class="fixedFont">
949 <span class="attributes">Roo.Fx.</span><b class="itemname">hasFxBlock</b>
957 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
966 <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>
972 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).
983 <dl class="detailList">
984 <dt class="heading">Returns:</dt>
986 <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>
1000 <td class="msource">
1008 <tr class="method-row config-row-alt1 expandable notInherited">
1009 <td class="micon"><a class="exi" href="#expand"> </a></td>
1013 <a id="Roo.Fx-method-highlight" name=".highlight"></a>
1014 <div class="fixedFont">
1015 <span class="attributes">Roo.Fx.</span><b class="itemname">highlight</b>
1017 (<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>)
1023 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1032 <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>
1038 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>
1045 <dl class="detailList">
1046 <dt class="heading">Parameters:</dt>
1049 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>color</b>
1052 <dd>(optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')</dd>
1055 <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>
1058 <dd>(optional) Object literal with any of the Fx config options</dd>
1066 <dl class="detailList">
1067 <dt class="heading">Returns:</dt>
1069 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1083 <td class="msource">
1091 <tr class="method-row config-row-alt0 expandable notInherited">
1092 <td class="micon"><a class="exi" href="#expand"> </a></td>
1096 <a id="Roo.Fx-method-pause" name=".pause"></a>
1097 <div class="fixedFont">
1098 <span class="attributes">Roo.Fx.</span><b class="itemname">pause</b>
1100 (<a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a> <B><i>seconds</i></B>)
1106 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1115 <div class="short">Creates a pause before any subsequent queued effects begin.</div>
1121 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>
1128 <dl class="detailList">
1129 <dt class="heading">Parameters:</dt>
1132 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>seconds</b>
1135 <dd>The length of time to pause (in seconds)</dd>
1143 <dl class="detailList">
1144 <dt class="heading">Returns:</dt>
1146 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1160 <td class="msource">
1168 <tr class="method-row config-row-alt1 expandable notInherited">
1169 <td class="micon"><a class="exi" href="#expand"> </a></td>
1173 <a id="Roo.Fx-method-puff" name=".puff"></a>
1174 <div class="fixedFont">
1175 <span class="attributes">Roo.Fx.</span><b class="itemname">puff</b>
1177 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1183 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1192 <div class="short">Fades the element out while slowly expanding it in all directions.</div>
1198 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>
1205 <dl class="detailList">
1206 <dt class="heading">Parameters:</dt>
1209 <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>
1212 <dd>(optional) Object literal with any of the Fx config options</dd>
1220 <dl class="detailList">
1221 <dt class="heading">Returns:</dt>
1223 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1237 <td class="msource">
1245 <tr class="method-row config-row-alt0 expandable notInherited">
1246 <td class="micon"><a class="exi" href="#expand"> </a></td>
1250 <a id="Roo.Fx-method-scale" name=".scale"></a>
1251 <div class="fixedFont">
1252 <span class="attributes">Roo.Fx.</span><b class="itemname">scale</b>
1254 (<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>)
1260 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1269 <div class="short">Animates the transition of an element's dimensions from a starting height/width<br/>to an ending height/width.</div>
1275 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>
1282 <dl class="detailList">
1283 <dt class="heading">Parameters:</dt>
1286 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>width</b>
1289 <dd>The new width (pass undefined to keep the original width)</dd>
1292 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a></span> <b>height</b>
1295 <dd>The new height (pass undefined to keep the original height)</dd>
1298 <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>
1301 <dd>(optional) Object literal with any of the Fx config options</dd>
1309 <dl class="detailList">
1310 <dt class="heading">Returns:</dt>
1312 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1326 <td class="msource">
1334 <tr class="method-row config-row-alt1 expandable notInherited">
1335 <td class="micon"><a class="exi" href="#expand"> </a></td>
1339 <a id="Roo.Fx-method-sequenceFx" name=".sequenceFx"></a>
1340 <div class="fixedFont">
1341 <span class="attributes">Roo.Fx.</span><b class="itemname">sequenceFx</b>
1349 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1358 <div class="short">Ensures that all effects queued after sequenceFx is called on the element are<br/>run in sequence.</div>
1364 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>}.
1375 <dl class="detailList">
1376 <dt class="heading">Returns:</dt>
1378 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1392 <td class="msource">
1400 <tr class="method-row config-row-alt0 expandable notInherited">
1401 <td class="micon"><a class="exi" href="#expand"> </a></td>
1405 <a id="Roo.Fx-method-shift" name=".shift"></a>
1406 <div class="fixedFont">
1407 <span class="attributes">Roo.Fx.</span><b class="itemname">shift</b>
1409 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1415 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1424 <div class="short">Animates the transition of any combination of an element's dimensions, xy position and/or opacity.</div>
1430 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>
1437 <dl class="detailList">
1438 <dt class="heading">Parameters:</dt>
1441 <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>
1444 <dd>Object literal with any of the Fx config options</dd>
1452 <dl class="detailList">
1453 <dt class="heading">Returns:</dt>
1455 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1469 <td class="msource">
1477 <tr class="method-row config-row-alt1 expandable notInherited">
1478 <td class="micon"><a class="exi" href="#expand"> </a></td>
1482 <a id="Roo.Fx-method-slideIn" name=".slideIn"></a>
1483 <div class="fixedFont">
1484 <span class="attributes">Roo.Fx.</span><b class="itemname">slideIn</b>
1486 (<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>)
1492 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1501 <div class="short">Slides the element into view.</div>
1507 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>
1514 <dl class="detailList">
1515 <dt class="heading">Parameters:</dt>
1518 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
1521 <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
1524 <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>
1527 <dd>(optional) Object literal with any of the Fx config options</dd>
1535 <dl class="detailList">
1536 <dt class="heading">Returns:</dt>
1538 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1552 <td class="msource">
1560 <tr class="method-row config-row-alt0 expandable notInherited">
1561 <td class="micon"><a class="exi" href="#expand"> </a></td>
1565 <a id="Roo.Fx-method-slideOut" name=".slideOut"></a>
1566 <div class="fixedFont">
1567 <span class="attributes">Roo.Fx.</span><b class="itemname">slideOut</b>
1569 (<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>)
1575 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1584 <div class="short">Slides the element out of view.</div>
1590 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>
1597 <dl class="detailList">
1598 <dt class="heading">Parameters:</dt>
1601 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>anchor</b>
1604 <dd>(optional) One of the valid Fx anchor positions (defaults to top: 't')</dd>
1607 <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>
1610 <dd>(optional) Object literal with any of the Fx config options</dd>
1618 <dl class="detailList">
1619 <dt class="heading">Returns:</dt>
1621 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1635 <td class="msource">
1643 <tr class="method-row config-row-alt1 expandable notInherited">
1644 <td class="micon"><a class="exi" href="#expand"> </a></td>
1648 <a id="Roo.Fx-method-stopFx" name=".stopFx"></a>
1649 <div class="fixedFont">
1650 <span class="attributes">Roo.Fx.</span><b class="itemname">stopFx</b>
1658 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1667 <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>
1673 Stops any running effects and clears the element's internal effects queue if it contains<br/>any additional effects that haven't started yet.
1684 <dl class="detailList">
1685 <dt class="heading">Returns:</dt>
1687 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1701 <td class="msource">
1709 <tr class="method-row config-row-alt0 expandable notInherited">
1710 <td class="micon"><a class="exi" href="#expand"> </a></td>
1714 <a id="Roo.Fx-method-switchOff" name=".switchOff"></a>
1715 <div class="fixedFont">
1716 <span class="attributes">Roo.Fx.</span><b class="itemname">switchOff</b>
1718 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>options</i></B>)
1724 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1733 <div class="short">Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).</div>
1739 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>
1746 <dl class="detailList">
1747 <dt class="heading">Parameters:</dt>
1750 <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>
1753 <dd>(optional) Object literal with any of the Fx config options</dd>
1761 <dl class="detailList">
1762 <dt class="heading">Returns:</dt>
1764 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1778 <td class="msource">
1786 <tr class="method-row config-row-alt1 expandable notInherited">
1787 <td class="micon"><a class="exi" href="#expand"> </a></td>
1791 <a id="Roo.Fx-method-syncFx" name=".syncFx"></a>
1792 <div class="fixedFont">
1793 <span class="attributes">Roo.Fx.</span><b class="itemname">syncFx</b>
1801 <a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a>
1810 <div class="short">Ensures that all effects queued after syncFx is called on the element are<br/>run concurrently.</div>
1816 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>}.
1827 <dl class="detailList">
1828 <dt class="heading">Returns:</dt>
1830 <dd><span class="fixedFont"><a href="./Roo.Element.html#constructor" roo:cls="Roo.Element.html#constructor">Roo.Element</a></span> The Element</dd>
1844 <td class="msource">
1855 <!-- ============================== events summary / details ======================== -->
1858 <a id="Roo.Fx-events"></a>
1864 <table cellspacing="0" class="member-table">
1865 <caption class="Empty">Events - Has None</caption>
1876 <!-- ============================== footer ================================= -->
1877 <div class="fineprint" style="clear:both">
1879 Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a> on Tue Jul 27 2010 11:05:06 GMT+0800 (HKT)
1881 <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>
projects / roojs1 / blob