Executing two tweening actions sequentially in Mootools

Question

I have a problem that I want to first fade the opacity of an image, and only after then move this image to the extreme right of the page. However, Mootools always does these two actions simultaneously instead of sequentially.

 <script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
 <script type="text/javascript">

 window.addEvents({
     "load" : function() {
         $$('.picture').getLast().setStyle('opacity', 0);                            
         var show = new Fx.Tween($$('.picture').getLast(), { 
             property: 'opacity',
             duration: '2500'
         });

         show.start(1);

         alert($$('.picture').getLast().getStyle('opacity'));

         var movePicture = new Fx.Tween($$('.picture').getLast(), {
             property : 'margin-left',
             duration : '2500'
         });

         while($$('.picture').getLast().getStyle('opacity')!= 1){}

         movePicture.start(700);
     },
     "domready" : function() {
     /* do something */
         function wait(msecs){
             var strt = new Date().getTime();
             var cur = strt
             while(cur - strt < msecs){
                 cur = new Date().getTime();
                 if((cur-strt)%100==0)
                     alert(cur-strt);
             }
         } 
     }
 });

 </script>

I want to execute show.start(1) and then after that is completed, execute movePicture.start(700).

Thanks in advance!

Answer 1

you need to use the .chain method on Fx.Tween

The official docs have a demo showing how to use it: http://mootools.net/demos/?demo=Chaining

Example: jsFiddle