Test Effects
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!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" />
<style type="text/css">
h3 {
clear: both;
}
.example {
font-size: 1.0em;
float: left;
margin-right: 10px;
margin-bottom: 10px;
width: 112px;
height: 112px;
border: 4px solid #669;
background-color: #ccf;
text-align: center;
padding: 1em 0.2em 0.2em 0.2em;
}
.demo {
clear: both;
}
</style>
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script>
<script src="MochiKit-1.4.2/lib/MochiKit/Position.js" type="text/javascript"></script>
<script src="MochiKit-1.4.2/lib/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>
Related examples in the same category