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


Key Description Type Default Required
element Target element to highlight. jQuery true
options Object(#/options) false


Key Description Type Default Required
startColor Color of the initial highlight. String #22a5ff false
endColor Color to fade to. String #F2F2F2 false
timer Total duration of the highlight in milliseconds. Number 2000 false
callback Executed once the fading of the highlight is complete. Function false


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 with custom colors#

var target = $('#element_to_highlight');

monster.ui.highlight(target, {
  startColor: '#3B3',
  endColor: '#FFF',
  timer: 5000,
  callback: function() {
    console.log('Highlight complete.');
Highlight an element in green #3B3 then fade it back to white #FFF in 5 seconds, and finally display a message in the console.