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>
1. | Test Effects | ||
2. | Demo of MochiKit Visual Elements |