Full Effects Test Suite
<!--
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>Full Effects Test Suite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="MochiKit-1.4.2/include/css/documentation.css" type="text/css" />
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script>
<style type="text/css">
#demo {
}
#demo li {
color: #8ba726;
font-size: 1.2em;
}
#democontainer {
margin: 30px 5px 0px 5px;
}
#demoall {
position: absolute;
top: 250px;
left: 400px;
font-size: 20px;
background: #f3f3f3;
color: #1C1D1F;
text-align: center;
border: 1px solid #ccc;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="document">
<div class="section">
<h1>Full Effects Test Suite</h1>
<ul id="demo">
<li onclick="setStyle('demoall', {'display': 'block'});fade('demoall')">fade</li>
<li onclick="setStyle('demoall', {'display': 'none'});appear('demoall')">appear</li>
<li onclick="setStyle('demoall', {'display': 'block'});puff('demoall')">puff</li>
<li onclick="blindDown('demoall')">blindDown</li>
<li onclick="setStyle('demoall', {'display': 'block'});blindUp('demoall')">blindUp</li>
<li onclick="switchOff('demoall')">switchOff</li>
<li onclick="slideDown('demoall')">slideDown</li>
<li onclick="slideUp('demoall')">slideUp</li>
<li onclick="setStyle('demoall', {'display': 'block'});dropOut('demoall', {'distance': 500})">dropOut</li>
<li onclick="setStyle('demoall', {'display': 'block'});shake('demoall')">shake</li>
<li onclick="setStyle('demoall', {'display': 'block'});pulsate('demoall')">pulsate</li>
<li onclick="setStyle('demoall', {'display': 'block'});squish('demoall')">squish</li>
<li onclick="setStyle('demoall', {'display': 'block'});fold('demoall')">fold</li>
<li onclick="grow('demoall')">grow</li>
<li onclick="setStyle('demoall', {'display': 'block'});shrink('demoall')">shrink</li>
<li onclick="setStyle('demoall', {'display': 'block'});Highlight('demoall', {startcolor: '#ffff33'})">Highlight</li>
<li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'font-size': '3px'}, 'queue': 'start'});Morph('demoall', {'style': {'font-size': '20px'}, 'queue': 'end'});">Morph font</li>
<li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'background-color': 'red'}, 'queue': 'start'});Morph('demoall', {'style': {'background-color': '#f3f3f3'}, 'queue': 'end'});">Morph color</li>
<li onclick="toggle('demoall', 'blind')">toggle (blind)</li>
<li onclick="toggle('demoall', 'slide')">toggle (slide)</li>
<li onclick="toggle('demoall', 'appear')">toggle (appear)</li>
<li onclick="toggle('demoall', 'size')">toggle (size)</li>
</ul>
<div id="demoall">
<div id="democontainer">Click on one of the left to see the effect</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category