1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
5 <title>script.aculo.us Effects functional test file
</title>
6 <meta http-equiv=
"content-type" content=
"text/html; charset=utf-8" />
7 <script src=
"../../MochiKit/MochiKit.js" type=
"text/javascript"></script>
8 <script src=
"../../MochiKit/Position.js" type=
"text/javascript"></script>
9 <script src=
"../../MochiKit/Visual.js" type=
"text/javascript"></script>
10 <style type=
"text/css" media=
"screen">
12 #d1 { background-color: #fcb; width:
200px; height:
200px; float:left; }
13 #d2 { background-color: #cfb; font-size:
2em; width:
200px; height:
200px; float:left; }
14 #d3 { background-color: #bcf; font-size:
2em; width:
200px; height:
200px; float:left; }
20 <h1>script.aculo.us Effects functional test file
</h1>
24 <div id=
"d1" style=
"font-size: 2em;">
25 <p style=
"font-size:1em;">Lorem ipsum dolor sit amet
</p>
29 <p>Lorem ipsum dolor sit amet
</p>
33 <p>Lorem ipsum dolor sit amet
</p>
36 <div style=
"clear: both">
37 <a href=
"#" onclick=
"startTimeline(); return false;">Start queued effects
</a> (in 'global' queue)
40 <div id=
"sliding"><div style=
"background-color:#ccc;font-size:20px;height:300px;width:150px;">
41 <a href=
"#" onclick=
"MochiKit.Visual.slideUp('sliding',{queue:{scope:'myscope', position:'end'}}); MochiKit.Visual.slideDown('sliding',{queue:{scope:'myscope', position:'end'}}); return false;">
42 Do a bit sliding in parallel, with a scoped queue
46 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
48 function startTimeline() {
49 //
3x highlight in front
50 for(var i=
0; i
<3; i++)
51 new MochiKit.Visual.Highlight('d3', { duration:
1.0, queue: 'front' });
53 // insert scale at very beginning
54 new MochiKit.Visual.Scale('d1',
75, { scaleContent: true, duration:
1.0, queue: 'front' });
56 // parallel implied, delay
0.5 sec
57 new MochiKit.Visual.Highlight('d1', { delay:
0.5 });
60 MochiKit.Visual.puff('d2', { duration:
4.0, queue: 'end' });