Slowing down a Mootools' element highlight?

Question

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 :)

Answer 1

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.