javascript - 在 Mootools 中顺序执行两个补间 Action

Question

我有一个问题，我想先淡化图像的不透明度，然后才将此图像移动到页面的最右侧。然而，Mootools 总是同时而不是顺序地执行这两个操作。

 <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>

我想执行 show.start(1)，完成后执行 movePicture.start(700)。

提前致谢!

Answer 1

你需要在Fx.Tween上使用.chain方法

官方文档有演示如何使用它:http://mootools.net/demos/?demo=Chaining

示例: jsFiddle