Let's see how to create a chain of Fx.Tween
methods by carrying out the following steps:
Create a new HTML document like we always do. It should have the following code:
<html> <head> <script type="text/javascript" src="mootools-1.2.1-core-nc.js"> </script> <script type="text/javascript"> window.addEvent('domready', function() { }); </script> </head> <body> <div id="box" style="background-color: #00f; height:50px; width:50px;"> </div> </body> </html>
Create a new object called
boxAnimation
, an instance of theFx.Tween
class, and giving it the target of our box element, which has anid
ofbox
, using the following code in ourdomready
event handler:var boxAnimation = new Fx.Tween( $('box') );
Now that we have our
boxAnimation
object, let's apply the first method (moving it to the right by adjusting the left margin) by entering this line of code:boxAnimation.start...