Path animation : Animation « Dojo toolkit « JavaScript Tutorial

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.fx");

dojo.addOnLoad(function(  ) {
    var box = dojo.byId("box");
    dojo.connect(box, "onclick", function(evt) {
        var easing = function(x) { return x; };
        var a1 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 1000,
            top : "150",
            left : "300"
        });
        var a2 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 400,
            top : "20",
            left : "350"
        });
        var a3 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "350",
            left : "400"
        });
        var a4 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "50",
            left : "10"
        });
        var a5 = dojo.fx.slideTo({
            node:box,
            easing : easing,
            duration : 800,
            top : "500",
            left : "100"
        });
        dojo.fx.chain([a1,a2,a3,a4,a5]).play(  );
    });
});
    
    
    </script>
  </head>
  <body class="tundra">
       <div id="box" style="background : red;height:400px">click</div>
</body>
</html>

29.86.Animation
	29.86.1.	Animate width property
	29.86.2.	Animation easing function
	29.86.3.	Animation with dojox.timing.Sequence
	29.86.4.	Animation: Add new class to tag and
	29.86.5.	Animation: enlarge
	29.86.6.	Animation: fly
	29.86.7.	Animation: resize
	29.86.8.	Animation: stratch
	29.86.9.	Chained animation
	29.86.10.	Change position animation
	29.86.11.	Fade effect for Menu under ComboButton
	29.86.12.	Fade me out
	29.86.13.	Fade out animation demo
	29.86.14.	Fadein animation
	29.86.15.	Fadeout animation
	29.86.16.	Cross fade
	29.86.17.	Highlight animation
	29.86.18.	Path animation
	29.86.19.	Set animation rate
	29.86.20.	Pause before
	29.86.21.	Pause one second
	29.86.22.	Repeat 5 times
	29.86.23.	Wipeout animation
	29.86.24.	Wipeout animation easing function
	29.86.25.	dojo animation alert
	29.86.26.	Math ease function