--- /dev/null
+<!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";
+
+
+ #sizeToTest {
+ position:absolute;
+ top:0;
+ left:300px;
+ border:2px solid #ededed;
+ width:50px; height:50px;
+ background:#fff;
+ text-align:center;
+ }
+ .test { width:100px; height:50px; border:3px solid #333;
+ position:absolute;
+ }
+ .box1 { top:20px; left:10px; }
+ .box2 { top:85px; left:10px; }
+ .box3 { top:170px; left:10px; }
+ .holder { position:relative; height:300px; }
+
+ </style>
+ <script type="text/javascript">
+ dojo.require("dojox.fx.ext-dojo.NodeList");
+
+ function chainTest(){
+ // FIXME: not recalculating mixin in init? or not re-mixing, rather.
+ // happens to a lot of propertyAnimations, actually when chaining, with a
+ // fixed 'start' property in the mixin. see _base/fx.js:slideBy()
+ dojo.fx.chain([
+ dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }),
+ dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 })
+ ]).play();
+ }
+ </script>
+</head>
+<body class="tundra">
+ <h1 class="testTitle">dojox.fx.slideBy test</h1>
+
+ <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a>
+ <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a>
+ <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a>
+ <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a>
+ <a href="#" onclick="javascript:dojo.query('.test').slideBy({ top:0, left:300 }).play()">dojo.query()</a>
+ <a href="#" onclick="javascript:chainTest()">chainTest</a>
+
+ <div id="sizeToTest">
+ lorem. ipsum.
+ </div>
+
+ <br style="clear:both;">
+
+ <div class="holder">
+ <div class="test box1">a</div><div class="test box2">b</div><div class="test box3">c</div>
+ </div>
+
+
+ HTML AFTER
+ <br>
+
+
+
+</body>
+</html>
projects / eow / blobdiff