<html>
<head>
        <title>fx.lite Test</title>
<script type="text/javascript" src="/scripts/dojo.js"></script>
<script type="text/javascript">
        dojo.require("dojo.style");
        dojo.require("dojo.fx.lite");
        var anim1 = null;
        var anim2 = null;
        var anim3 = null;
        var testDiv1 = null;
        var testDiv2 = null;
        var testDiv3 = null;

        function onPageLoad(){
                testDiv1 = dojo.byId("testDiv1");
                testDiv2 = dojo.byId("testDiv2");
                testDiv3 = dojo.byId("testDiv3");
                
                anim1 = dojo.fx.lite.fadeWipeIn(testDiv1, 1000, dojo.fx.lite.easeOut);
                anim2 = dojo.fx.lite.fadeWipeOut(testDiv2, 1000, dojo.fx.lite.easeIn);
                anim3 = new dojo.fx.lite.Combine(dojo.fx.lite.slideTo(testDiv3, [100, 100], 1000, dojo.fx.lite.easeOut), dojo.fx.lite.fadeOut(testDiv3, 1000, dojo.fx.lite.easeIn));
                
                anim1.chain(anim2, anim3).play();
        }

        dojo.addOnLoad(onPageLoad);
</script>
</head>
<body>
<div id="testDiv1" style="display: none; background: white;">
Hello!1
<br />
Hi!
<br />
Yo!
</div>
<div id="testDiv2" style="background: white;">
Hello!2
<br />
Hi!
<br />
Yo!
</div>
<div id="testDiv3" style="position: absolute; top: 300px; left: 200px; background: white;">
Hello!3
<br />
Hi!
<br />
Yo!
</div>
</body>
</html>