4 <meta http-equiv=
"Content-Type" content=
"text/html;charset=UTF-8" />
6 <title>Fx Tests
</title>
8 <script src=
"../../../Source/Core/Core.js" type=
"text/javascript"></script>
9 <script src=
"../../../Source/Types/Array.js" type=
"text/javascript"></script>
10 <script src=
"../../../Source/Types/Function.js" type=
"text/javascript"></script>
11 <script src=
"../../../Source/Types/Number.js" type=
"text/javascript"></script>
12 <script src=
"../../../Source/Types/String.js" type=
"text/javascript"></script>
13 <script src=
"../../../Source/Types/Object.js" type=
"text/javascript"></script>
14 <script src=
"../../../Source/Types/DOMEvent.js" type=
"text/javascript"></script>
15 <script src=
"../../../Source/Browser/Browser.js" type=
"text/javascript"></script>
16 <script src=
"../../../Source/Slick/Slick.Parser.js" type=
"text/javascript"></script>
17 <script src=
"../../../Source/Slick/Slick.Finder.js" type=
"text/javascript"></script>
18 <script src=
"../../../Source/Element/Element.js" type=
"text/javascript"></script>
19 <script src=
"../../../Source/Element/Element.Event.js" type=
"text/javascript"></script>
20 <script src=
"../../../Source/Element/Element.Style.js" type=
"text/javascript"></script>
21 <script src=
"../../../Source/Class/Class.js" type=
"text/javascript"></script>
22 <script src=
"../../../Source/Class/Class.Extras.js" type=
"text/javascript"></script>
23 <script src=
"../../../Source/Fx/Fx.js" type=
"text/javascript"></script>
24 <script src=
"../../../Source/Fx/Fx.CSS.js" type=
"text/javascript"></script>
25 <script src=
"../../../Source/Fx/Fx.Tween.js" type=
"text/javascript"></script>
26 <script src=
"../../../Source/Fx/Fx.Morph.js" type=
"text/javascript"></script>
31 font:
13px sans-serif;
35 border-top:
1px dashed #AAA;
36 font: normal
22px sans-serif;
47 padding-bottom:
150px;
53 border-right:
1px dashed #AAA;
55 font-family: monospace;
66 background: greenyellow;
70 background: orangered;
74 background: greenyellow;
75 border:
1px solid black;
98 var logger
= $('log');
99 var log = function(msg
, success
){
101 'class': success
== true ? 'success' : (success
== false ? 'fail' : ''),
103 }).inject(logger
, 'top');
113 <a href=
"#" id=
"simple-fx-tween-link">tween
</a>
116 <div id=
"simple-fx-tween" class=
"box"></div>
120 var simpleFxTween
= new Fx
.Tween('simple-fx-tween', {
124 var simpleFxTweenToggle
= true;
126 $('simple-fx-tween-link').addEvent('click', function(event
){
127 event
.preventDefault();
128 simpleFxTween
.start(simpleFxTweenToggle
? 500 : 200);
129 simpleFxTweenToggle
= !simpleFxTweenToggle
;
138 <a href=
"#" id=
"simple-fx-morph-link">morph
</a>
141 <div id=
"simple-fx-morph" class=
"box"></div>
145 var simpleFxMorph
= new Fx
.Morph('simple-fx-morph');
146 var simpleFxMorphToggle
= true;
148 $('simple-fx-morph-link').addEvent('click', function(event
){
149 event
.preventDefault();
150 simpleFxMorph
.start(simpleFxMorphToggle
? {
155 height
: [250, '50px']
157 simpleFxMorphToggle
= !simpleFxMorphToggle
;
162 <h1>Element.morph
</h1>
165 <a href=
"#" id=
"fx-sun">start
</a>
168 <div id=
"sun" class=
"box"></div>
178 var sun
= document
.id('sun').set("morph", {
181 var sunToggle
= true;
182 $('fx-sun').addEvent('click', function(event
){
183 event
.preventDefault();
184 sun
.morph(sunToggle
? {
189 sunToggle
= !sunToggle
;
193 <h1>Fx.Morph with % as unit
</h1>
196 <a href=
"#" id=
"units-fx-morph-link">morph
</a>
199 <div class=
"wrapper">
200 <div id=
"units-fx-morph" class=
"box"></div>
205 var unitsFxMorph
= new Fx
.Morph('units-fx-morph', {
208 var unitsFxMorphToggle
= true;
210 $('units-fx-morph-link').addEvent('click', function(event
){
211 event
.preventDefault();
212 unitsFxMorph
.start(unitsFxMorphToggle
? {
221 unitsFxMorphToggle
= !unitsFxMorphToggle
;
229 <a href=
"#" id=
"fade-link">fade
</a><br>
230 <span id=
"fade-opacity"></span>
233 <div class=
"wrapper">
234 <div id=
"fade" class=
"box"></div>
235 <h1 id=
"fade2" class=
"box">test
</h1>
240 var fade
= $('fade').set('tween', {
242 $('fade-opacity').set('text', fade
.getStyle('opacity'))
243 .appendText(' ' + fade
.getStyle('visibility'));
245 onComplete: function(){
246 $('fade-opacity').set('text', fade
.getStyle('opacity'))
247 .appendText(' ' + fade
.getStyle('visibility'));
251 var fade2
= $('fade2');
252 $('fade-link').addEvent('click', function(event
){
253 event
.preventDefault();
254 var to
= fadeToggle
++ % 5 / 4;
255 fade
.fade(to
== 1 ? 'in' : (to
== 0 ? 'out' : to
));