1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
#crossfade {
position:absolute;
top:0;
left:300px;
border:2px solid #ededed;
width:50px; height:50px;
background:#fff;
text-align:center;
}
table tr { padding:5px; margin:5px; border:1px solid #ccc; }
.box {
width:75px; height:75px; float:left;
border:1px solid #ededed;
padding:20px;
background-color:#fee;
}
.two { background-color:#c7bedd; }
.nopad { padding:0 !important;
width:100px; height:100px; border:0;
}
.hidden {
opacity:0;
}
</style>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
function basicXfade(){
dojox.fx.crossFade({
nodes: [dojo.byId('node1'),dojo.byId('node2')],
duration: 1000
}).play();
};
function absoluteXfade(){
dojox.fx.crossFade({
nodes: ["node3","node4"],
duration:1000
}).play();
};
var _anim;
function simpleLoop(){
dojo.byId('button').disabled = "disabled";
_anim = dojox.fx.crossFade({
nodes: ["node5","node6"],
duration:1000
});
dojo.connect(_anim,"onEnd","simpleLoop");
_anim.play(500);
};
function stopLoop(){ _anim.stop(); }
function buttonExample(){
dojox.fx.crossFade({
nodes: [
// FIXME: fails in ie6?!?
dijit.byId('node7').domNode,
dijit.byId('node8').domNode
],
duration: 350
}).play();
}
dojo.addOnLoad(function(){
// this is a hack to make nodes with class="hidden" hidden
// because ie6 is a horrible wretched beast
dojo.query(".hidden").forEach(function(node){
dojo.style(node,"opacity","0");
});
});
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.crossFade test</h1>
<h3>a simple demonstration of two nodes fading simultaneously</h3>
<div>
<input type="button" onclick="basicXfade()" value="run" />
<div style="padding:20px">
<div id="node1" style="display:inline;" class="box hidden">box1</div>
<div id="node2" class="box">box2</div>
</div>
<br style="clear:both">
</div>
<h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
<input type="button" onclick="absoluteXfade()" value="run" />
<div>
<div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
<div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
<div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
</div>
<br style="clear:both">
</div>
<h3>simple looping crossfade</h3>
<input type="button" onclick="simpleLoop()" value="run" id="button" />
<div>
<div style="padding:20px;">
<div id="node5" class="box nopad">box one</div>
<div id="node6" class="box two nopad hidden">box two</div>
</div>
<br style="clear:both">
</div>
<!-- FIXME: acting oddly, only in IE though
<h3>An example of cross-fading a dijit.form.Button</h3>
<input type="button" onclick="buttonExample()" value="run" id="button" />
<div>
<div style="position:relative;">
<div dojoType="dijit.TitlePane" id="node7"
style="position:absolute; top:0; left:0;">Lorem content two</div>
<div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
style="position:absolute; top:0; left:0;">Lorem content one</div>
</div>
<br style="clear:both;">
</div>
-->
<h3>that's all, folks...</h3>
</body>
</html>
|
