<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Effects</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="effects_combi.css" rel="stylesheet" type="text/css" /> <script src="/MochiKit/MochiKit.js" type="text/javascript"></script> <script src="/MochiKit/Position.js" type="text/javascript"></script> <script src="/MochiKit/Visual.js" type="text/javascript"></script> <script type="text/javascript"> function showEffect() { f = document.forms[0]; v = f['effect'].value; if (v.substring(0, 1) == '+') { v = "MochiKit.Visual.toggle('demo-all','" + v.substring(1) + "'"; } else { v = "MochiKit.Visual." + v + "('demo-all'"; } if (f['slow'].checked) { v += ',{duration:4}'; } v += ')'; var v = eval(v); } function resetBox() { e = MochiKit.DOM.getElement('demo-all'); MochiKit.Visual.appear(e); MochiKit.Style.setStyle(e, {}); } </script> </head> <body> <h3>Here are demos of all combination effects:</h3> <div class="demo"> <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')"> <span>Click for Visual.appear demo</span> </div> <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)"> <span>Click for Visual.fade demo</span> </div> <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)"> <span>Click for Visual.puff demo</span> </div> <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)"> <span>Click for Visual.blindDown demo</span> </div> <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)"> <span>Click for Visual.blindUp demo</span> </div> <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)"> <span>Click for Visual.switchOff demo</span> </div> <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"> <span>Click for Visual.slideDown demo</span> </div> <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"> <span>Click for Visual.slideUp demo</span> </div> <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)"> <span>Click for Visual.dropOut demo</span> </div> <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)"> <span>Click for Visual.shake demo</span> </div> <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)"> <span>Click for Visual.pulsate demo</span> </div> <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)"> <span>Click for Visual.squish demo</span> </div> <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)"> <span>Click for Visual.fold demo</span> </div> <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)"> <span>Click for Visual.grow demo</span> </div> <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)"> <span>Click for Visual.shrink demo</span> </div> <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)"> <span>Click for Visual.Highlight demo</span> </div> </div> <h3>Here are all demos on one single element:</h3> <div id="demo-all" class="example" onclick="showEffect()"> <span>Click to see the selected effect</span> </div> <form action="" style="margin-left:140px;height:150px;"> <fieldset style="border:none;"> <select name="effect" size="1"> <optgroup label="Single effects"> <option value="appear">appear</option> <option value="fade">fade</option> <option value="puff">puff</option> <option value="blindDown">blindDown</option> <option value="blindUp">blindUp</option> <option value="slideDown">slideDown</option> <option value="slideUp">slideUp</option> <option value="switchOff">switchOff</option> <option value="dropOut">dropOut</option> <option value="shake">shake</option> <option value="pulsate">pulsate</option> <option value="squish">squish</option> <option value="fold">fold</option> <option value="grow">grow</option> <option value="shrink">shrink</option> <option value="Highlight">Highlight</option> </optgroup> <optgroup label="Toggle effects"> <option value="+appear">appear</option> <option value="+blind">blind</option> <option value="+slide">slide</option> <option value="+size">size</option> </optgroup> </select> <input type="checkbox" name="slow"/> in slow-motion </fieldset> <fieldset style="border:none;"> <input type="button" name="show" value="Click to show effect" onclick="showEffect()"/> <input type="button" name="show" value="Click to reset box" onclick="resetBox()"/> </fieldset> </form> <div class="demo"> <h3>Links to other samples:</h3> <ul style="float:left;margin-top:0;"> <li><a href="effects_bigslide.html">Big slide effects</a></li> <li><a href="effects_slide.html">Slide effects</a></li> <li><a href="effects_blind.html">Blind effects</a></li> <li><a href="effects_blindslide.html">Blind/Slide effects</a></li> <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li> </ul> <ul style="float:left;margin-top:0"> <li><a href="effects_onload.html">Onload effects</a></li> <li><a href="effects_scroll.html">Scroll effects</a></li> <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li> <li><a href="effects_queue.html">Queue effects</a></li> <li><a href="effects_queue_limit.html">Queue limit effects</a></li> </ul> </div> <div class="demo"/> </body> </html>