Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | <?xml version="1.0" encoding="utf-8" ?> |
2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
3 | ||
4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
5 | <head> | |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
7 | <meta name="generator" content="Docutils 0.4.1: http://docutils.sourceforge.net/" /> | |
8 | <title>MochiKit.Visual - visual effects</title> | |
9 | ||
10 | <link rel="stylesheet" href="../../../include/css/documentation.css" type="text/css" /> | |
11 | <script type="text/javascript" src="../../../packed/MochiKit/MochiKit.js"></script> | |
12 | <script type="text/javascript" src="../../js/toc.js"></script> | |
13 | </head> | |
14 | <body> | |
15 | <div class="document"> | |
16 | <div class="section"> | |
17 | <h1><a id="name" name="name">Name</a></h1> | |
18 | <p>MochiKit.Visual - visual effects</p> | |
19 | </div> | |
20 | <div class="section"> | |
21 | <h1><a id="synopsis" name="synopsis">Synopsis</a></h1> | |
22 | <pre class="literal-block"> | |
23 | // round the corners of all h1 elements | |
24 | roundClass("h1", null); | |
25 | ||
26 | // round the top left corner of the element with the id "title" | |
27 | roundElement("title", {corners: "tl"}); | |
28 | ||
29 | // Add an fade effect to an element | |
30 | fade('myelement'); | |
31 | </pre> | |
32 | </div> | |
33 | <div class="section"> | |
34 | <h1><a id="description" name="description">Description</a></h1> | |
35 | <p>MochiKit.Visual provides visual effects and support functions for | |
36 | visuals.</p> | |
37 | </div> | |
38 | <div class="section"> | |
39 | <h1><a id="dependencies" name="dependencies">Dependencies</a></h1> | |
40 | <ul class="simple"> | |
41 | <li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li> | |
42 | <li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li> | |
43 | <li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li> | |
44 | <li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li> | |
45 | <li><a class="mochiref reference" href="Position.html">MochiKit.Position</a></li> | |
46 | </ul> | |
47 | </div> | |
48 | <div class="section"> | |
49 | <h1><a id="overview" name="overview">Overview</a></h1> | |
50 | <p>MochiKit.Visual provides different visual effect: rounded corners and | |
51 | animations for your HTML elements. Rounded corners are created | |
52 | completely through CSS manipulations and require no external images or | |
53 | style sheets. This implementation was adapted from <a class="reference" href="http://www.openrico.org">Rico</a>. Dynamic | |
54 | effects are ported from <a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p> | |
55 | </div> | |
56 | <div class="section"> | |
57 | <h1><a id="api-reference" name="api-reference">API Reference</a></h1> | |
58 | <div class="section"> | |
59 | <h2><a id="functions" name="functions">Functions</a></h2> | |
60 | <p> | |
61 | <a name="fn-roundclass"></a> | |
62 | <a class="mochidef reference" href="#fn-roundclass">roundClass(tagName[, className[, options]])</a>:</p> | |
63 | <blockquote> | |
64 | <p>Rounds all of the elements that match the <tt class="docutils literal"><span class="pre">tagName</span></tt> and | |
65 | <tt class="docutils literal"><span class="pre">className</span></tt> specifiers, using the options provided. <tt class="docutils literal"><span class="pre">tagName</span></tt> | |
66 | or <tt class="docutils literal"><span class="pre">className</span></tt> can be <tt class="docutils literal"><span class="pre">null</span></tt> to match all tags or classes. | |
67 | For more information about the options, see the | |
68 | <a class="mochiref reference" href="#fn-roundelement">roundElement</a> function.</p> | |
69 | <dl class="docutils"> | |
70 | <dt><em>Availability</em>:</dt> | |
71 | <dd>Available in MochiKit 1.3.1+</dd> | |
72 | </dl> | |
73 | </blockquote> | |
74 | <p> | |
75 | <a name="fn-roundelement"></a> | |
76 | <a class="mochidef reference" href="#fn-roundelement">roundElement(element[, options])</a>:</p> | |
77 | <blockquote> | |
78 | <p>Immediately round the corners of the specified element. The | |
79 | element can be given as either a string with the element ID, or as | |
80 | an element object.</p> | |
81 | <p>The options mapping has the following defaults:</p> | |
82 | <table border="1" class="docutils"> | |
83 | <colgroup> | |
84 | <col width="35%" /> | |
85 | <col width="65%" /> | |
86 | </colgroup> | |
87 | <tbody valign="top"> | |
88 | <tr><td>corners</td> | |
89 | <td><tt class="docutils literal"><span class="pre">"all"</span></tt></td> | |
90 | </tr> | |
91 | <tr><td>color</td> | |
92 | <td><tt class="docutils literal"><span class="pre">"fromElement"</span></tt></td> | |
93 | </tr> | |
94 | <tr><td>bgColor</td> | |
95 | <td><tt class="docutils literal"><span class="pre">"fromParent"</span></tt></td> | |
96 | </tr> | |
97 | <tr><td>blend</td> | |
98 | <td><tt class="docutils literal"><span class="pre">true</span></tt></td> | |
99 | </tr> | |
100 | <tr><td>border</td> | |
101 | <td><tt class="docutils literal"><span class="pre">false</span></tt></td> | |
102 | </tr> | |
103 | <tr><td>compact</td> | |
104 | <td><tt class="docutils literal"><span class="pre">false</span></tt></td> | |
105 | </tr> | |
106 | </tbody> | |
107 | </table> | |
108 | <p>corners:</p> | |
109 | <blockquote> | |
110 | <p>specifies which corners of the element should be rounded. | |
111 | Choices are:</p> | |
112 | <ul class="simple"> | |
113 | <li>all</li> | |
114 | <li>top</li> | |
115 | <li>bottom</li> | |
116 | <li>tl (top left)</li> | |
117 | <li>bl (bottom left)</li> | |
118 | <li>tr (top right)</li> | |
119 | <li>br (bottom right)</li> | |
120 | </ul> | |
121 | <dl class="docutils"> | |
122 | <dt>Example:</dt> | |
123 | <dd><tt class="docutils literal"><span class="pre">"tl</span> <span class="pre">br"</span></tt>: top-left and bottom-right corners are rounded</dd> | |
124 | </dl> | |
125 | </blockquote> | |
126 | <dl class="docutils"> | |
127 | <dt>blend:</dt> | |
128 | <dd>specifies whether the color and background color should be | |
129 | blended together to produce the border color.</dd> | |
130 | <dt><em>Availability</em>:</dt> | |
131 | <dd>Available in MochiKit 1.3.1+</dd> | |
132 | </dl> | |
133 | </blockquote> | |
134 | <p> | |
135 | <a name="fn-toggle"></a> | |
136 | <a class="mochidef reference" href="#fn-toggle">toggle(element[, effect[, options]])</a>:</p> | |
137 | <blockquote> | |
138 | <p>Toggle an element between visible and invisible state using an effect.</p> | |
139 | <dl class="docutils"> | |
140 | <dt>effect:</dt> | |
141 | <dd>One of the visual pairs to use, between 'slide', 'blind', | |
142 | 'appear', and 'size'.</dd> | |
143 | <dt><em>Availability</em>:</dt> | |
144 | <dd>Available in MochiKit 1.4+</dd> | |
145 | </dl> | |
146 | </blockquote> | |
147 | <p> | |
148 | <a name="fn-tagifytext"></a> | |
149 | <a class="mochidef reference" href="#fn-tagifytext">tagifyText(element[, tagifyStyle])</a>:</p> | |
150 | <blockquote> | |
151 | <p>Transform a node text into nodes containing one letter by tag.</p> | |
152 | <dl class="docutils"> | |
153 | <dt>tagifyStyle:</dt> | |
154 | <dd>style to apply to character nodes, default to 'position: | |
155 | relative'.</dd> | |
156 | <dt><em>Availability</em>:</dt> | |
157 | <dd>Available in MochiKit 1.4+</dd> | |
158 | </dl> | |
159 | </blockquote> | |
160 | <p> | |
161 | <a name="fn-multiple"></a> | |
162 | <a class="mochidef reference" href="#fn-multiple">multiple(elements, effect[, options])</a>:</p> | |
163 | <blockquote> | |
164 | <p>Launch the same effect on a list of elements.</p> | |
165 | <dl class="docutils"> | |
166 | <dt><em>Availability</em>:</dt> | |
167 | <dd>Available in MochiKit 1.4+</dd> | |
168 | </dl> | |
169 | </blockquote> | |
170 | </div> | |
171 | <div class="section"> | |
172 | <h2><a id="basic-effects-classes" name="basic-effects-classes">Basic Effects classes</a></h2> | |
173 | <p> | |
174 | <a name="fn-defaultoptions"></a> | |
175 | <a class="mochidef reference" href="#fn-defaultoptions">DefaultOptions</a>:</p> | |
176 | <blockquote> | |
177 | <p>Default options for all Effect creation.</p> | |
178 | <table border="1" class="docutils"> | |
179 | <colgroup> | |
180 | <col width="22%" /> | |
181 | <col width="78%" /> | |
182 | </colgroup> | |
183 | <tbody valign="top"> | |
184 | <tr><td>transition</td> | |
185 | <td><tt class="docutils literal"><span class="pre">MochiKit.Visual.Transitions.sinoidal</span></tt></td> | |
186 | </tr> | |
187 | <tr><td>duration</td> | |
188 | <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> | |
189 | </tr> | |
190 | <tr><td>fps</td> | |
191 | <td><tt class="docutils literal"><span class="pre">25.0</span></tt></td> | |
192 | </tr> | |
193 | <tr><td>sync</td> | |
194 | <td><tt class="docutils literal"><span class="pre">false</span></tt></td> | |
195 | </tr> | |
196 | <tr><td>from</td> | |
197 | <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> | |
198 | </tr> | |
199 | <tr><td>to</td> | |
200 | <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> | |
201 | </tr> | |
202 | <tr><td>delay</td> | |
203 | <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> | |
204 | </tr> | |
205 | <tr><td>queue</td> | |
206 | <td><tt class="docutils literal"><span class="pre">'parallel'</span></tt></td> | |
207 | </tr> | |
208 | </tbody> | |
209 | </table> | |
210 | <dl class="docutils"> | |
211 | <dt><em>Availability</em>:</dt> | |
212 | <dd>Available in MochiKit 1.4+</dd> | |
213 | </dl> | |
214 | </blockquote> | |
215 | <p> | |
216 | <a name="fn-base"></a> | |
217 | <a class="mochidef reference" href="#fn-base">Base()</a>:</p> | |
218 | <blockquote> | |
219 | <p>Base class to all effects. Define a basic looping service, use it | |
220 | for creating new effects.</p> | |
221 | <p>You can override the methods <tt class="docutils literal"><span class="pre">setup</span></tt>, <tt class="docutils literal"><span class="pre">update</span></tt> and <tt class="docutils literal"><span class="pre">finish`</span></tt>.</p> | |
222 | <p>The class defines a number of events that will be called during effect | |
223 | life. The events are:</p> | |
224 | <ul class="simple"> | |
225 | <li>beforeStart</li> | |
226 | <li>beforeSetup</li> | |
227 | <li>beforeUpdate</li> | |
228 | <li>afterUpdate</li> | |
229 | <li>beforeFinish</li> | |
230 | <li>afterFinish</li> | |
231 | </ul> | |
232 | <p>If you want to define your own callbacks, define it in the options | |
233 | parameter of the effect. Example:</p> | |
234 | <pre class="literal-block"> | |
235 | // I slide it up and then down again | |
236 | slideUp('myelement', {afterFinish: function () { | |
237 | slideDown('myelement'); | |
238 | }); | |
239 | </pre> | |
240 | <p>Specific <tt class="docutils literal"><span class="pre">internal</span></tt> events are also available: for each one abone the | |
241 | same exists with 'Internal' (example: 'beforeStartInternal'). Their purpose | |
242 | is mainly for creating your own effect and keep the user access to event | |
243 | callbacks (not overriding the library ones).</p> | |
244 | <dl class="docutils"> | |
245 | <dt><em>Availability</em>:</dt> | |
246 | <dd>Available in MochiKit 1.4+</dd> | |
247 | </dl> | |
248 | </blockquote> | |
249 | <p> | |
250 | <a name="fn-parallel"></a> | |
251 | <a class="mochidef reference" href="#fn-parallel">Parallel(effects [, options])</a>:</p> | |
252 | <blockquote> | |
253 | <p>Launch effects in parallel.</p> | |
254 | <dl class="docutils"> | |
255 | <dt><em>Availability</em>:</dt> | |
256 | <dd>Available in MochiKit 1.4+</dd> | |
257 | </dl> | |
258 | </blockquote> | |
259 | <p> | |
260 | <a name="fn-opacity"></a> | |
261 | <a class="mochidef reference" href="#fn-opacity">Opacity(element [, options])</a>:</p> | |
262 | <blockquote> | |
263 | <p>Change the opacity of an element progressively.</p> | |
264 | <p>options:</p> | |
265 | <table border="1" class="docutils"> | |
266 | <colgroup> | |
267 | <col width="43%" /> | |
268 | <col width="57%" /> | |
269 | </colgroup> | |
270 | <tbody valign="top"> | |
271 | <tr><td>from</td> | |
272 | <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> | |
273 | </tr> | |
274 | <tr><td>to</td> | |
275 | <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> | |
276 | </tr> | |
277 | </tbody> | |
278 | </table> | |
279 | <dl class="docutils"> | |
280 | <dt><em>Availability</em>:</dt> | |
281 | <dd>Available in MochiKit 1.4+</dd> | |
282 | </dl> | |
283 | </blockquote> | |
284 | <p> | |
285 | <a name="fn-move"></a> | |
286 | <a class="mochidef reference" href="#fn-move">Move(element [, options])</a>:</p> | |
287 | <blockquote> | |
288 | <p>Change the position of an element in small steps, creating a | |
289 | moving effect.</p> | |
290 | <p>options:</p> | |
291 | <table border="1" class="docutils"> | |
292 | <colgroup> | |
293 | <col width="36%" /> | |
294 | <col width="64%" /> | |
295 | </colgroup> | |
296 | <tbody valign="top"> | |
297 | <tr><td>x</td> | |
298 | <td><tt class="docutils literal"><span class="pre">0</span></tt></td> | |
299 | </tr> | |
300 | <tr><td>y</td> | |
301 | <td><tt class="docutils literal"><span class="pre">0</span></tt></td> | |
302 | </tr> | |
303 | <tr><td>position</td> | |
304 | <td><tt class="docutils literal"><span class="pre">'relative'</span></tt></td> | |
305 | </tr> | |
306 | </tbody> | |
307 | </table> | |
308 | <dl class="docutils"> | |
309 | <dt><em>Availability</em>:</dt> | |
310 | <dd>Available in MochiKit 1.4+</dd> | |
311 | </dl> | |
312 | </blockquote> | |
313 | <p> | |
314 | <a name="fn-scale"></a> | |
315 | <a class="mochidef reference" href="#fn-scale">Scale(element, percent [, options])</a>:</p> | |
316 | <blockquote> | |
317 | <p>Change the size of an element.</p> | |
318 | <dl class="docutils"> | |
319 | <dt>percent:</dt> | |
320 | <dd>Final wanted size in percent of current size. The size will be | |
321 | reduced if the value is between 0 and 100, and raised if the | |
322 | value is above 100.</dd> | |
323 | </dl> | |
324 | <p>options:</p> | |
325 | <table border="1" class="docutils"> | |
326 | <colgroup> | |
327 | <col width="57%" /> | |
328 | <col width="43%" /> | |
329 | </colgroup> | |
330 | <tbody valign="top"> | |
331 | <tr><td>scaleX</td> | |
332 | <td><tt class="docutils literal"><span class="pre">true</span></tt></td> | |
333 | </tr> | |
334 | <tr><td>scaleY</td> | |
335 | <td><tt class="docutils literal"><span class="pre">true</span></tt></td> | |
336 | </tr> | |
337 | <tr><td>scaleContent</td> | |
338 | <td><tt class="docutils literal"><span class="pre">true</span></tt></td> | |
339 | </tr> | |
340 | <tr><td>scaleFromCenter</td> | |
341 | <td><tt class="docutils literal"><span class="pre">false</span></tt></td> | |
342 | </tr> | |
343 | <tr><td>scaleMode</td> | |
344 | <td><tt class="docutils literal"><span class="pre">'box'</span></tt></td> | |
345 | </tr> | |
346 | <tr><td>scaleFrom</td> | |
347 | <td><tt class="docutils literal"><span class="pre">100.0</span></tt></td> | |
348 | </tr> | |
349 | <tr><td>scaleTo</td> | |
350 | <td><tt class="docutils literal"><span class="pre">percent</span></tt></td> | |
351 | </tr> | |
352 | </tbody> | |
353 | </table> | |
354 | <dl class="docutils"> | |
355 | <dt><em>Availability</em>:</dt> | |
356 | <dd>Available in MochiKit 1.4+</dd> | |
357 | </dl> | |
358 | </blockquote> | |
359 | <p> | |
360 | <a name="fn-highlight"></a> | |
361 | <a class="mochidef reference" href="#fn-highlight">Highlight(element [, options])</a>:</p> | |
362 | <blockquote> | |
363 | <p>Highlight an element, flashing with one color.</p> | |
364 | <p>options:</p> | |
365 | <table border="1" class="docutils"> | |
366 | <colgroup> | |
367 | <col width="44%" /> | |
368 | <col width="56%" /> | |
369 | </colgroup> | |
370 | <tbody valign="top"> | |
371 | <tr><td>startcolor</td> | |
372 | <td><tt class="docutils literal"><span class="pre">'#ffff99'</span></tt></td> | |
373 | </tr> | |
374 | </tbody> | |
375 | </table> | |
376 | <dl class="docutils"> | |
377 | <dt><em>Availability</em>:</dt> | |
378 | <dd>Available in MochiKit 1.4+</dd> | |
379 | </dl> | |
380 | </blockquote> | |
381 | <p> | |
382 | <a name="fn-scrollto"></a> | |
383 | <a class="mochidef reference" href="#fn-scrollto">ScrollTo(element [, options])</a>:</p> | |
384 | <blockquote> | |
385 | <p>Scroll the window to the position of the given element.</p> | |
386 | <dl class="docutils"> | |
387 | <dt><em>Availability</em>:</dt> | |
388 | <dd>Available in MochiKit 1.4+</dd> | |
389 | </dl> | |
390 | </blockquote> | |
391 | <p> | |
392 | <a name="fn-morph"></a> | |
393 | <a class="mochidef reference" href="#fn-morph">Morph(element [, options])</a>:</p> | |
394 | <blockquote> | |
395 | <p>Make a transformation to the given element. It's called with the option | |
396 | <tt class="docutils literal"><span class="pre">style</span></tt> with an array holding the styles to change. It works with | |
397 | properties for size (<tt class="docutils literal"><span class="pre">font-size</span></tt>, <tt class="docutils literal"><span class="pre">border-width</span></tt>, ...) and properties | |
398 | for color (<tt class="docutils literal"><span class="pre">color</span></tt>, <tt class="docutils literal"><span class="pre">background-color</span></tt>, ...).</p> | |
399 | <p>For size, it's better to have defined the original style. You <em>must</em> | |
400 | use the same unit in the call to Morph (no translation exists between two | |
401 | different units).</p> | |
402 | <p>Parsed length are postfixed with: em, ex, px, in, cm, mm, pt, pc.</p> | |
403 | <p>Example:</p> | |
404 | <pre class="literal-block"> | |
405 | <div id="foo" style="font-size: 1em">MyDiv</div> | |
406 | ... | |
407 | Morph("foo", {"style": {"font-size": "2em"}}); | |
408 | </pre> | |
409 | <dl class="docutils"> | |
410 | <dt><em>Availability</em>:</dt> | |
411 | <dd>Available in MochiKit 1.4+</dd> | |
412 | </dl> | |
413 | </blockquote> | |
414 | </div> | |
415 | <div class="section"> | |
416 | <h2><a id="combination-effects" name="combination-effects">Combination Effects</a></h2> | |
417 | <p> | |
418 | <a name="fn-fade"></a> | |
419 | <a class="mochidef reference" href="#fn-fade">fade(element [, options])</a>:</p> | |
420 | <blockquote> | |
421 | <p>Change the opacity of an element until making it disappear.</p> | |
422 | <p>options:</p> | |
423 | <table border="1" class="docutils"> | |
424 | <colgroup> | |
425 | <col width="12%" /> | |
426 | <col width="88%" /> | |
427 | </colgroup> | |
428 | <tbody valign="top"> | |
429 | <tr><td>from</td> | |
430 | <td><tt class="docutils literal"><span class="pre">element.opacity</span> <span class="pre">||</span> <span class="pre">1.0</span></tt></td> | |
431 | </tr> | |
432 | <tr><td>to</td> | |
433 | <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> | |
434 | </tr> | |
435 | </tbody> | |
436 | </table> | |
437 | <dl class="docutils"> | |
438 | <dt><em>Availability</em>:</dt> | |
439 | <dd>Available in MochiKit 1.4+</dd> | |
440 | </dl> | |
441 | </blockquote> | |
442 | <p> | |
443 | <a name="fn-appear"></a> | |
444 | <a class="mochidef reference" href="#fn-appear">appear(element [, options])</a>:</p> | |
445 | <blockquote> | |
446 | <p>Slowly show an invisible element.</p> | |
447 | <p>options:</p> | |
448 | <table border="1" class="docutils"> | |
449 | <colgroup> | |
450 | <col width="36%" /> | |
451 | <col width="64%" /> | |
452 | </colgroup> | |
453 | <tbody valign="top"> | |
454 | <tr><td>from</td> | |
455 | <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> | |
456 | </tr> | |
457 | <tr><td>to</td> | |
458 | <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> | |
459 | </tr> | |
460 | </tbody> | |
461 | </table> | |
462 | <dl class="docutils"> | |
463 | <dt><em>Availability</em>:</dt> | |
464 | <dd>Available in MochiKit 1.4+</dd> | |
465 | </dl> | |
466 | </blockquote> | |
467 | <p> | |
468 | <a name="fn-puff"></a> | |
469 | <a class="mochidef reference" href="#fn-puff">puff(element [, options])</a>:</p> | |
470 | <blockquote> | |
471 | <p>Make an element double size, and then make it disappear.</p> | |
472 | <dl class="docutils"> | |
473 | <dt><em>Availability</em>:</dt> | |
474 | <dd>Available in MochiKit 1.4+</dd> | |
475 | </dl> | |
476 | </blockquote> | |
477 | <p> | |
478 | <a name="fn-blindup"></a> | |
479 | <a class="mochidef reference" href="#fn-blindup">blindUp(element [, options])</a>:</p> | |
480 | <blockquote> | |
481 | <p>Blind an element up, changing its vertical size to 0.</p> | |
482 | <dl class="docutils"> | |
483 | <dt><em>Availability</em>:</dt> | |
484 | <dd>Available in MochiKit 1.4+</dd> | |
485 | </dl> | |
486 | </blockquote> | |
487 | <p> | |
488 | <a name="fn-blinddown"></a> | |
489 | <a class="mochidef reference" href="#fn-blinddown">blindDown(element [, options])</a>:</p> | |
490 | <blockquote> | |
491 | <p>Blind an element down, restoring its vertical size.</p> | |
492 | <dl class="docutils"> | |
493 | <dt><em>Availability</em>:</dt> | |
494 | <dd>Available in MochiKit 1.4+</dd> | |
495 | </dl> | |
496 | </blockquote> | |
497 | <p> | |
498 | <a name="fn-switchoff"></a> | |
499 | <a class="mochidef reference" href="#fn-switchoff">switchOff(element [, options])</a>:</p> | |
500 | <blockquote> | |
501 | <p>A switch-off like effect, making the element disappear.</p> | |
502 | <dl class="docutils"> | |
503 | <dt><em>Availability</em>:</dt> | |
504 | <dd>Available in MochiKit 1.4+</dd> | |
505 | </dl> | |
506 | </blockquote> | |
507 | <p> | |
508 | <a name="fn-dropout"></a> | |
509 | <a class="mochidef reference" href="#fn-dropout">dropOut(element [, options])</a>:</p> | |
510 | <blockquote> | |
511 | <p>Make the element fall and fade.</p> | |
512 | <p>options:</p> | |
513 | <table border="1" class="docutils"> | |
514 | <colgroup> | |
515 | <col width="53%" /> | |
516 | <col width="47%" /> | |
517 | </colgroup> | |
518 | <tbody valign="top"> | |
519 | <tr><td>distance</td> | |
520 | <td><tt class="docutils literal"><span class="pre">100</span></tt></td> | |
521 | </tr> | |
522 | </tbody> | |
523 | </table> | |
524 | <dl class="docutils"> | |
525 | <dt><em>Availability</em>:</dt> | |
526 | <dd>Available in MochiKit 1.4+</dd> | |
527 | </dl> | |
528 | </blockquote> | |
529 | <p> | |
530 | <a name="fn-shake"></a> | |
531 | <a class="mochidef reference" href="#fn-shake">shake(element [, options])</a>:</p> | |
532 | <blockquote> | |
533 | <p>Shake an element from left to right.</p> | |
534 | <dl class="docutils"> | |
535 | <dt><em>Availability</em>:</dt> | |
536 | <dd>Available in MochiKit 1.4+</dd> | |
537 | </dl> | |
538 | </blockquote> | |
539 | <p> | |
540 | <a name="fn-slidedown"></a> | |
541 | <a class="mochidef reference" href="#fn-slidedown">slideDown(element [, options])</a>:</p> | |
542 | <blockquote> | |
543 | <p>Slide an element down.</p> | |
544 | <dl class="docutils"> | |
545 | <dt><em>Availability</em>:</dt> | |
546 | <dd>Available in MochiKit 1.4+</dd> | |
547 | </dl> | |
548 | </blockquote> | |
549 | <p> | |
550 | <a name="fn-slideup"></a> | |
551 | <a class="mochidef reference" href="#fn-slideup">slideUp(element [, options])</a>:</p> | |
552 | <blockquote> | |
553 | <p>Slide an element up.</p> | |
554 | <dl class="docutils"> | |
555 | <dt><em>Availability</em>:</dt> | |
556 | <dd>Available in MochiKit 1.4+</dd> | |
557 | </dl> | |
558 | </blockquote> | |
559 | <p> | |
560 | <a name="fn-squish"></a> | |
561 | <a class="mochidef reference" href="#fn-squish">squish(element [, options])</a>:</p> | |
562 | <blockquote> | |
563 | <p>Reduce the horizontal and vertical sizes at the same time, using | |
564 | the top left corner.</p> | |
565 | <dl class="docutils"> | |
566 | <dt><em>Availability</em>:</dt> | |
567 | <dd>Available in MochiKit 1.4+</dd> | |
568 | </dl> | |
569 | </blockquote> | |
570 | <p> | |
571 | <a name="fn-grow"></a> | |
572 | <a class="mochidef reference" href="#fn-grow">grow(element [, options])</a>:</p> | |
573 | <blockquote> | |
574 | <p>Restore the size of an element.</p> | |
575 | <dl class="docutils"> | |
576 | <dt><em>Availability</em>:</dt> | |
577 | <dd>Available in MochiKit 1.4+</dd> | |
578 | </dl> | |
579 | </blockquote> | |
580 | <p> | |
581 | <a name="fn-shrink"></a> | |
582 | <a class="mochidef reference" href="#fn-shrink">shrink(element [, options])</a>:</p> | |
583 | <blockquote> | |
584 | <p>Shrink an element to its center.</p> | |
585 | <dl class="docutils"> | |
586 | <dt><em>Availability</em>:</dt> | |
587 | <dd>Available in MochiKit 1.4+</dd> | |
588 | </dl> | |
589 | </blockquote> | |
590 | <p> | |
591 | <a name="fn-pulsate"></a> | |
592 | <a class="mochidef reference" href="#fn-pulsate">pulsate(element [, options])</a>:</p> | |
593 | <blockquote> | |
594 | <p>Switch an element between appear and fade.</p> | |
595 | <p>options:</p> | |
596 | <table border="1" class="docutils"> | |
597 | <colgroup> | |
598 | <col width="43%" /> | |
599 | <col width="57%" /> | |
600 | </colgroup> | |
601 | <tbody valign="top"> | |
602 | <tr><td>pulses</td> | |
603 | <td><tt class="docutils literal"><span class="pre">null</span></tt></td> | |
604 | </tr> | |
605 | </tbody> | |
606 | </table> | |
607 | <p>pulses controls the number of pulses made during the effect.</p> | |
608 | <dl class="docutils"> | |
609 | <dt><em>Availability</em>:</dt> | |
610 | <dd>Available in MochiKit 1.4+</dd> | |
611 | </dl> | |
612 | </blockquote> | |
613 | <p> | |
614 | <a name="fn-fold"></a> | |
615 | <a class="mochidef reference" href="#fn-fold">fold(element [, options])</a>:</p> | |
616 | <blockquote> | |
617 | <p>Reduce first the vertical size, and then the horizontal size.</p> | |
618 | <dl class="docutils"> | |
619 | <dt><em>Availability</em>:</dt> | |
620 | <dd>Available in MochiKit 1.4+</dd> | |
621 | </dl> | |
622 | </blockquote> | |
623 | </div> | |
624 | <div class="section"> | |
625 | <h2><a id="the-effects-queue" name="the-effects-queue">The Effects Queue</a></h2> | |
626 | <p>When you create effects based on user input (mouse clicks for example), it can | |
627 | create conflicts between the effects if multiple effects are running at the | |
628 | same time. To manage this problem, the Queue mechanism has been introduced: | |
629 | it's responsible for running the effects as you desired.</p> | |
630 | <p>By default, you have one Queue called 'global', and the effects run in 'parallel' | |
631 | (see default options). Every effects have a queue option to customize this. | |
632 | It can be a string, the scope is then global:</p> | |
633 | <ul class="simple"> | |
634 | <li><cite>start</cite>: the effect will be run before any other;</li> | |
635 | <li><cite>end</cite>: the effect will be run after any other;</li> | |
636 | <li><cite>break</cite>: every other effects break when the the effect start;</li> | |
637 | <li><cite>parallel</cite>: the effect run normally with others.</li> | |
638 | </ul> | |
639 | <p>But you have even more control if you use an array with the following keys:</p> | |
640 | <ul class="simple"> | |
641 | <li><cite>position</cite> takes a value listed above;</li> | |
642 | <li><cite>scope</cite> manages how the information has to be taken. If it's <cite>global</cite> | |
643 | then it's the same information for every effects. Otherwise you can define | |
644 | your own scode. For example, if you add an effect on a specified element, | |
645 | you may use the element id as scode;</li> | |
646 | <li><cite>limit</cite> defines how many effects can run in the current scode. If an | |
647 | effect is added whereas the limit is reached, it will never be run (it's | |
648 | lost).</li> | |
649 | </ul> | |
650 | </div> | |
651 | </div> | |
652 | <div class="section"> | |
653 | <h1><a id="see-also" name="see-also">See Also</a></h1> | |
654 | <table class="docutils footnote" frame="void" id="id1" rules="none"> | |
655 | <colgroup><col class="label" /><col /></colgroup> | |
656 | <tbody valign="top"> | |
657 | <tr><td class="label"><a name="id1">[1]</a></td><td>Application Kit Reference - NSColor: <a class="reference" href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/ObjC_classic/Classes/NSColor.html">http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/ObjC_classic/Classes/NSColor.html</a></td></tr> | |
658 | </tbody> | |
659 | </table> | |
660 | <table class="docutils footnote" frame="void" id="id2" rules="none"> | |
661 | <colgroup><col class="label" /><col /></colgroup> | |
662 | <tbody valign="top"> | |
663 | <tr><td class="label"><a name="id2">[2]</a></td><td>SVG 1.0 color keywords: <a class="reference" href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">http://www.w3.org/TR/SVG/types.html#ColorKeywords</a></td></tr> | |
664 | </tbody> | |
665 | </table> | |
666 | <table class="docutils footnote" frame="void" id="id3" rules="none"> | |
667 | <colgroup><col class="label" /><col /></colgroup> | |
668 | <tbody valign="top"> | |
669 | <tr><td class="label"><a name="id3">[3]</a></td><td>W3C CSS3 Color Module: <a class="reference" href="http://www.w3.org/TR/css3-color/#svg-color">http://www.w3.org/TR/css3-color/#svg-color</a></td></tr> | |
670 | </tbody> | |
671 | </table> | |
672 | </div> | |
673 | <div class="section"> | |
674 | <h1><a id="authors" name="authors">Authors</a></h1> | |
675 | <ul class="simple"> | |
676 | <li>Kevin Dangoor <<a class="reference" href="mailto:dangoor@gmail.com">dangoor@gmail.com</a>></li> | |
677 | <li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li> | |
678 | <li>Thomas Herve <<a class="reference" href="mailto:therve@gmail.com">therve@gmail.com</a>></li> | |
679 | <li>Round corners originally adapted from Rico <<a class="reference" href="http://openrico.org/">http://openrico.org/</a>> | |
680 | (though little remains)</li> | |
681 | <li>Effects originally adapted from Script.aculo.us | |
682 | <<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>></li> | |
683 | </ul> | |
684 | </div> | |
685 | <div class="section"> | |
686 | <h1><a id="copyright" name="copyright">Copyright</a></h1> | |
687 | <p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. This program is | |
688 | dual-licensed free software; you can redistribute it and/or modify it | |
689 | under the terms of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> or the <a class="reference" href="http://www.opensource.org/licenses/afl-2.1.php">Academic Free License | |
690 | v2.1</a>.</p> | |
691 | <p>Portions adapted from <a class="reference" href="http://www.openrico.org">Rico</a> are available under the terms of the | |
692 | <a class="reference" href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License, Version 2.0</a>.</p> | |
693 | <p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms | |
694 | of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p> | |
695 | </div> | |
696 | </div> | |
697 | ||
698 | </body> | |
699 | </html> |