mochikit_v14/doc/html/MochiKit/Visual.html

   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(&quot;h1&quot;, null);
  25
  26 // round the top left corner of the element with the id &quot;title&quot;
  27 roundElement(&quot;title&quot;, {corners: &quot;tl&quot;});
  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">&quot;all&quot;</span></tt></td>
  90 </tr>
  91 <tr><td>color</td>
  92 <td><tt class="docutils literal"><span class="pre">&quot;fromElement&quot;</span></tt></td>
  93 </tr>
  94 <tr><td>bgColor</td>
  95 <td><tt class="docutils literal"><span class="pre">&quot;fromParent&quot;</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">&quot;tl</span> <span class="pre">br&quot;</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 &lt;div id=&quot;foo&quot; style=&quot;font-size: 1em&quot;&gt;MyDiv&lt;/div&gt;
 406 ...
 407 Morph(&quot;foo&quot;, {&quot;style&quot;: {&quot;font-size&quot;: &quot;2em&quot;}});
 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 &lt;<a class="reference" href="mailto:dangoor&#64;gmail.com">dangoor&#64;gmail.com</a>&gt;</li>
 677 <li>Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;</li>
 678 <li>Thomas Herve &lt;<a class="reference" href="mailto:therve&#64;gmail.com">therve&#64;gmail.com</a>&gt;</li>
 679 <li>Round corners originally adapted from Rico &lt;<a class="reference" href="http://openrico.org/">http://openrico.org/</a>&gt;
 680 (though little remains)</li>
 681 <li>Effects originally adapted from Script.aculo.us
 682 &lt;<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>&gt;</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 &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;.  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>