dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
146 lines (126 loc) • 3.96 kB
HTML
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="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 ;
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>