如何在 motools 中使用元素方法变形或补间延迟或设置杜累

How to delay or set durration with Element Method morph or tween in motools?

本文关键字：变形 延迟 杜累 设置 方法 元素 motools      更新时间：2023-09-26

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

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

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

任何帮助不胜感激。谢谢！

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

这是一个

由两部分组成的问题。

第 1 部分

具有元素原型的类实例的特殊 acessor 可用于 fx.tween/morph 等 mootools 类以及 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() {}

相关文章：