| 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> |