1

Fx.MorphまたはFx.Tweenを使用すると、効果の遅延と持続時間の追加は非常に明確ですが、メソッドmorphまたはtweenを使用して持続時間を遅延または追加するにはどうすればよいですか？

たとえば、これを3秒遅らせ、期間を500に設定します

mouseleave: function() {
     el1.tween("margin-bottom","-280px");
     el.morph({'opacity': [0.2,1]});
}

どんな助けでも大歓迎です。ありがとうございました！

編集済み：ここに例http://jsfiddle.net/UungE/17/ があります。これは、情報内の別の4つの要素をモーフィングしているため（したがってコードを短縮しようとしているため）、情報にはより多くの行がありますが、基本だけを追加して機能させています結構ですが、info2以下のコードで同じ結果を達成したいと思います。出来ますか

4

1 に答える 1

4

これは2つの部分からなる質問です。

パート1

要素のプロトタイプを持つクラスインスタンス用の特別なアクセサは、fx.tween / morphやrequest、validatorなどのmootoolsクラスで利用できます。

el.set('tween', {
    duration: 500
}).tween(something);

setは、Fx.Tweenのインスタンスが見つからない場合は作成するかsetOptions()、既存のインスタンスに新しいオプションを追加します。

同じ.getことが、実際のFx.somethingインスタンスを返すことができる場合にのみ適用されます。

var instance = el.get('morph', { duration: 600 });
instance.start({marginBottom:[0,-280]});

カスタムset/getが実際に何をするかをここで確認してください：https ：//github.com/mootools/mootools-core/blob/master/Source/Fx/Fx.Tween.js#L45-61

パターンとして単一のdom要素に関連するクラスに非常に役立ちます。

パート2

遅延の追加は簡単です。

mouseleave: function() {
    clearTimeout(this.retrieve('handle')); // reset.
    this.store('handle' (function() {
        el1.tween(); ....

    }).delay(3000));

}

彼らが3秒以内に出て戻ってきた場合、それはタイマーをリセットします。

あなたのフィドルで例を片付けます：

$$('.info').each(function(el) {
    el.set('morph', {
        duration: 300,
        'link': 'cancel'
    }).addEvents({
        mouseenter: function() {
            clearTimeout(this.retrieve('handle'));
            this.morph({
                'margin-left': 70
            });
        },
        mouseleave: function() {
             this.store('handle', (function() {
                this.morph({
                    marginLeft: 0
                });
            }).delay(500, this));
        }
    });
});

セットアップでより少ないコードが必要な場合は、hoverIntent用に作成したこのdelay疑似フックのようなものを使用できますが、実際には、遅延イベントにも使用できます：http: //jsfiddle.net/dimitar/xAJ5f/

その後、次のことができます。mouseleave:delay(500): function() {}

于 2012-05-20T17:05:29.790 に答える