これは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() {}