如何在mootools中使用Element Method变形或补间来延迟或设置持续时间？

Question

使用Fx.Morph或Fx.Tween延迟效果并添加durration非常清楚，但如何使用方法变形或补间来延迟或添加持续时间？

例如将此延迟3秒并将持续时间设置为500

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

任何帮助表示赞赏。谢谢！

编辑：这里是示例http://jsfiddle.net/UungE/17/信息有更多的行，因为我正在变形信息中的另外4个元素（因此尝试缩短代码）但我添加了基础知识，我让它工作得很好，但是我想用info2和更少的代码实现相同的结果。是否有可能

Answer 1

这是一个两部分问题。

第1部分

具有元素原型的类实例的特殊访问者可用于moxools类，如fx.tween / morph以及request，validator等。

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]});

在这里查看自定义设置/获取的内容：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写的这个延迟伪钩子 - 但也适用于任何延迟事件，真的： http://jsfiddle.net/dimitar/xAJ5f/

然后你可以这样做：mouseleave:delay(500): function() {}