Выполнение двух действий tweening последовательно в Mootools

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