1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml">
5 <title>Test Effects
</title>
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
7 <link href=
"effects_combi.css" rel=
"stylesheet" type=
"text/css" />
8 <script src=
"../../MochiKit/MochiKit.js" type=
"text/javascript"></script>
9 <script src=
"../../MochiKit/Position.js" type=
"text/javascript"></script>
10 <script src=
"../../MochiKit/Visual.js" type=
"text/javascript"></script>
14 <h3>Here are demos of all combination effects:
</h3>
16 <div class=
"example" id=
"demo-effect-appear" onclick=
"MochiKit.Visual.appear('demo-effect-fade')">
17 <span>Click for Visual.appear demo
</span>
19 <div class=
"example" id=
"demo-effect-fade" onclick=
"MochiKit.Visual.fade(this)">
20 <span>Click for Visual.fade demo
</span>
22 <div class=
"example" id=
"demo-effect-puff" onclick=
"MochiKit.Visual.puff(this)">
23 <span>Click for Visual.puff demo
</span>
25 <div class=
"example" id=
"demo-effect-blinddown" onclick=
"MochiKit.Visual.blindDown(this)">
26 <div style=
"height:120px;">
28 <span>Click for Visual.blindDown demo
</span>
31 <div class=
"example" id=
"demo-effect-blindup" onclick=
"MochiKit.Visual.blindUp(this)">
32 <span>Click for Visual.blindUp demo
</span>
34 <div class=
"example" id=
"demo-effect-switchoff" onclick=
"MochiKit.Visual.switchOff(this)">
35 <span>Click for Visual.switchOff demo
</span>
37 <div class=
"example" id=
"demo-effect-slidedown" onclick=
"MochiKit.Visual.slideDown(this)"><div style=
"height:120px;">
38 <span>Click for Visual.slideDown demo
</span>
40 <div class=
"example" id=
"demo-effect-slideup" onclick=
"MochiKit.Visual.slideUp(this)"><div style=
"height:120px;">
41 <span>Click for Visual.slideUp demo
</span>
43 <div class=
"example" id=
"demo-effect-dropout" onclick=
"MochiKit.Visual.dropOut(this)">
44 <span>Click for Visual.dropOut demo
</span>
46 <div class=
"example" id=
"demo-effect-shake" onclick=
"MochiKit.Visual.shake(this)">
47 <span>Click for Visual.shake demo
</span>
49 <div class=
"example" id=
"demo-effect-pulsate" onclick=
"MochiKit.Visual.pulsate(this)">
50 <span>Click for Visual.pulsate demo
</span>
52 <div class=
"example" id=
"demo-effect-squish" onclick=
"MochiKit.Visual.squish(this)">
53 <span>Click for Visual.squish demo
</span>
55 <div class=
"example" id=
"demo-effect-fold" onclick=
"MochiKit.Visual.fold(this)">
56 <span>Click for Visual.fold demo
</span>
58 <div class=
"example" id=
"demo-effect-grow" onclick=
"MochiKit.Visual.grow(this)">
59 <span>Click for Visual.grow demo
</span>
61 <div class=
"example" id=
"demo-effect-shrink" onclick=
"MochiKit.Visual.shrink(this)">
62 <span>Click for Visual.shrink demo
</span>
64 <div class=
"example" id=
"demo-effect-highlight" onclick=
"new MochiKit.Visual.Highlight(this)">
65 <span>Click for Visual.Highlight demo
</span>
69 <h3>Here are all demos on one single element:
</h3>
71 <li onclick=
"MochiKit.Visual.appear('demo-all')">Click for Visual.appear demo
</li>
72 <li onclick=
"MochiKit.Visual.fade('demo-all')">Click for Visual.fade demo
</li>
73 <li onclick=
"MochiKit.Visual.puff('demo-all')">Click for Visual.puff demo
</li>
74 <li onclick=
"MochiKit.Visual.blindDown('demo-all')">Click for Visual.blindDown demo
</li>
75 <li onclick=
"MochiKit.Visual.blindUp('demo-all')">Click for Visual.blindUp demo
</li>
76 <li onclick=
"MochiKit.Visual.switchOff('demo-all')">Click for Visual.switchOff demo
</li>
77 <li onclick=
"MochiKit.Visual.slideDown('demo-all')">Click for Visual.slideDown demo
</li>
78 <li onclick=
"MochiKit.Visual.slideUp('demo-all')">Click for Visual.slideUp demo
</li>
79 <li onclick=
"MochiKit.Visual.dropOut('demo-all')">Click for Visual.dropOut demo
</li>
80 <li onclick=
"MochiKit.Visual.shake('demo-all')">Click for Visual.shake demo
</li>
81 <li onclick=
"MochiKit.Visual.pulsate('demo-all')">Click for Visual.pulsate demo
</li>
82 <li onclick=
"MochiKit.Visual.squish('demo-all')">Click for Visual.squish demo
</li>
83 <li onclick=
"MochiKit.Visual.fold('demo-all')">Click for Visual.fold demo
</li>
84 <li onclick=
"MochiKit.Visual.grow('demo-all')">Click for Visual.grow demo
</li>
85 <li onclick=
"MochiKit.Visual.shrink('demo-all')">Click for Visual.shrink demo
</li>
86 <li onclick=
"new MochiKit.Visual.Highlight('demo-all')">Click for Visual.Highlight demo
</li>
87 <li onclick=
"MochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)
</li>
88 <li onclick=
"MochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)
</li>
89 <li onclick=
"MochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)
</li>
90 <li onclick=
"MochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)
</li>
93 <span>Click on one of the left to see the effect
</span>
95 <span id=
"reset" onclick=
"new MochiKit.Visual.appear('demo-all')">Click here to reset box
</span>
98 Links to other samples:
100 <li><a href=
"effects_bigslide.html">Big slide effects
</a></li>
101 <li><a href=
"effects_slide.html">Slide effects
</a></li>
102 <li><a href=
"effects_blind.html">Blind effects
</a></li>
103 <li><a href=
"effects_blindslide.html">Blind/Slide effects
</a></li>
104 <li><a href=
"effects_fadeappear.html">Fade/Appear effects
</a></li>
105 <li><a href=
"effects_onload.html">Onload effects
</a></li>
106 <li><a href=
"effects_scroll.html">Scroll effects
</a></li>
107 <li><a href=
"effects_grow_shrink.html">Grow/Shrink effects
</a></li>
108 <li><a href=
"effects_queue.html">Queue effects
</a></li>
109 <li><a href=
"effects_queue_limit.html">Queue limit effects
</a></li>