monster.ui.highlight()

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

SyntaxCopied

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

ParametersCopied

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

optionsCopied

Key	Description	Type	Default	Required
startColor	Color of the initial highlight.	String	#2297FF	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

DescriptionCopied

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.

ExamplesCopied

Highlight an element using the default settingsCopied

var target = $('#element_to_highlight');

monster.ui.highlight(target);

Highlight an element with custom colorsCopied

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.