减慢 Mootools 的速度元素突出显示？

发布于 2024-09-15 10:36:12 字数 177 浏览 8 评论 0 原文

所以，突出元素的方法很棒！

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

除了它的进出速度太快之外 - 是否有任何我可以修改的选项，类似于 Tween 的 duration: 'long'？

谢谢：）

原文

So, the highlight element method is great!

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

Except it's in an out much too quickly - are there any options I can modify, similar to Tween's duration: 'long'?

Thanks :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余生再见 2024-09-22 10:36:12

您可以修改相关元素的默认补间持续时间。例如，如果您希望 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;
    }
});

这应该允许您不仅可以传递开始/结束颜色，还可以传递突出显示应使用的持续时间。上面的代码未经测试，但应该可以正常工作。

You could modify the default tween duration on the elements in question. For example, if you want the tween on the element with the id 'flashyflashy' to have a duration of 2000ms instead of the default 500ms, call the following:

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

That should slow down the elements default tween instance, and thus slow down the highlight method.

You could also implement a custom highlight function:

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

That should allow you to pass through not only the start/end colors, but also the duration that the highlight should use. Above code untested, but it should work fine.

回复收藏 0 原文

~没有更多了~