1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>dojox.fx - animation sets to use!</title>
7 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
8 <script type="text/javascript" src="../_base.js"></script>
9 <style type="text/css">
10 @import "../../../dojo/resources/dojo.css";
11 @import "../../../dijit/themes/dijit.css";
12 @import "../../../dijit/themes/tundra/tundra.css";
13 @import "../../../dijit/tests/css/dijitTests.css";
20 border:2px solid #ededed;
21 width:50px; height:50px;
25 .test { width:100px; height:50px; border:3px solid #333;
28 .box1 { top:20px; left:10px; }
29 .box2 { top:85px; left:10px; }
30 .box3 { top:170px; left:10px; }
31 .holder { position:relative; height:300px; }
34 <script type="text/javascript">
35 dojo.require("dojox.fx.ext-dojo.NodeList");
38 // FIXME: not recalculating mixin in init? or not re-mixing, rather.
39 // happens to a lot of propertyAnimations, actually when chaining, with a
40 // fixed 'start' property in the mixin. see _base/fx.js:slideBy()
42 dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }),
43 dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 })
49 <h1 class="testTitle">dojox.fx.slideBy test</h1>
51 <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a>
52 <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a>
53 <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a>
54 <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a>
55 <a href="#" onclick="javascript:dojo.query('.test').slideBy({ top:0, left:300 }).play()">dojo.query()</a>
56 <a href="#" onclick="javascript:chainTest()">chainTest</a>
62 <br style="clear:both;">
65 <div class="test box1">a</div><div class="test box2">b</div><div class="test box3">c</div>