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

您需要在.chain

上使用Fx.Tween方法

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

示例： jsFiddle

在Mootools中按顺序执行两个补间操作

1 个答案: