2010-12-07 16 views
2

の連鎖:その後、#elementをフェードイン、およびその関数を実行しますMooToolsの効果私はこのような何かを行うことができるようにしたいと思い

var fx = new Fx.Tween($('element'), { 
    duration: 500, 
    property: 'opacity', 
    transition: Fx.Transitions.Quart.easeOut, 
    link: 'chain' 
}); 

fx.start(0, 1) 
.chain(function() { 
    alert('foo'); 
}) 
.start(1, 0) 
.chain(function() { 
    alert('bar'); 
}); 

を。しかし、私はそれが#elementが戻ってフェードインされていないことを意味最初の鎖()、後に第2のスタートを実行するために取得することはできません。あなたの助け

+0

あなたはちょうどこのようなことをすることができますhttp://www.jsfiddle.net/dimitar/FkCgY/(1.2.x +)あなたは偶然1.12にいるのですか? –

+0

私は1.3(昨日時点のサイトからの最新)です。私はすでにネスティング(それはうまくいく)を使う方法に似た方法を持っていますが、むしろそれを避けて単純な連鎖メカニズムを使用したいと思います。 – catkin

+0

心配はありません。私たちもそれを持っています:) http://www.jsfiddle.net/dimitar/FkCgY/4/チェーンは、クラスを拡張するときにそのように動作します:http://mootools.net/docs/core/Class/Class .Extras#Chain –

答えて

4

ため

おかげでそれが何か非常にことが判明しますあなたが発射する次の「リンク」の順にcallChain()を使用する必要がある以外は、上記のコードと同様に動作することができます。これは私が今使っているものです:上の

var effect = new Fx.Tween($('element')); 
effect.start('opacity', 1) 
.chain(function() { /* Do stuff */ this.callChain();) 
.chain(function() { /* Do stuff */ this.callChain();) 
.chain(function() { /* Do stuff */ this.callChain();) 
.chain(function() { /* Do stuff */ this.callChain();) 
.chain(function() { /* Do stuff */); 

そしてそう。

これは、チェーンがFx.T​​weenのインスタンスではなく、チェーンクラスのインスタンスを返すためです。 callChain()を使用する必要があるのはちょっと面倒ですが、ネストされた関数のロードよりも優れています。