Skip to content


The monster.ui.highlight() method quickly highlights an element then fades it back to normal, from blue to gray by default.


monster.ui.highlight(element[, options]);


element: jQuery object (mandatory)#

Target HTML element to highlight.

options: Object (optional)#
  • startColor: String (optional, default: #22a5ff) - color of the initial highlight
  • endColor: String (optional, default: #F2F2F2) - color to fade to
  • timer: Number (optional, default 2000) - total duration of the highlight in milliseconds
  • callback: Function (optional) - executed once the fading of the highlight is complete




This function will highlight a target element by changing its background color to startColor then fading it to endColor in timer milliseconds. If the element is out of the view, the page will be scrolled back to that element. Once the fading is complete if the callback function has been provided, it will be executed.


  • Highlight an element using the default settings

    var target = $('#element_to_highlight');

  • Highlight an element in green ('#3B3') then fade it back to white ('#FFF') in 5 seconds, and finally display a message in the console.

    var target = $('#element_to_highlight');
    monster.ui.highlight(target, {
        startColor: '#3B3',
        endColor: '#FFF',
        timer: 5000,
        callback: function() {
            console.log('Highlight complete.');