减慢 Mootools 的元素亮点？答案

【问题标题】：Slowing down a Mootools' element highlight?减慢 Mootools 的元素亮点？
【发布时间】：2010-08-23 14:35:51
【问题描述】：

所以，高亮元素方法很棒！

$('flashyflashy').highlight('#fcc');

除了退出太快 - 有没有我可以修改的选项，类似于 Tween 的 duration: 'long'？

谢谢:)

【问题讨论】：

标签： mootools highlight tween

【解决方案1】：

您可以修改相关元素的默认补间持续时间。例如，如果您希望 id 为“flashyflashy”的元素的补间持续时间为 2000 毫秒而不是默认的 500 毫秒，请调用以下命令：

$("flashylflashy").get("tween").options.duration = 2000;

这应该会减慢元素默认补间实例的速度，从而减慢高亮方法的速度。

您还可以实现自定义高亮功能：

Element.implement({
    highlight: function(start, end, duration){
        if (!end){
            end = this.retrieve('highlight:original', this.getStyle('background-color'));
            end = (end == 'transparent') ? '#fff' : end;
        }
        var tween = this.get('tween');
        tween.options.duration = duration;
        tween.start('background-color', start || '#ffff88', end).chain(function(){
            this.setStyle('background-color', this.retrieve('highlight:original'));
            tween.callChain();
        }.bind(this));
        return this;
    }
});

这应该让您不仅可以通过开始/结束颜色，还可以通过高亮应该使用的持续时间。以上代码未经测试，但应该可以正常工作。

【讨论】：

干杯！我从没想过要为该元素减慢整个 Tween 类的速度……这是有道理的。
不客气。我同意，这是一个蛮力解决方案，因为 highlight 不是使用元素补间实例的唯一功能，因此不是最理想的解决方案 - 但它有效.. ;)
请注意，在 MooTools 1.2.5 中执行 el.get("tween").options.duration = 2000; 将不起作用，因为执行 el.get() 到 set 是一个错误，现在它可以正常工作应该el.set('tween', {duration: 2000}).
好点 - 我还没有实现它，但感谢您的提醒。
感谢 Oskar - 我错过了 1.2.5 的补丁说明。