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

这是一个两部分的问题。

第1部分

具有元素原型的类实例的特殊访问器可用于 mootools 类，如 fx.tween/morph 以及请求、验证器等。

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

于 2012-05-20T17:05:29.790 回答