monster.ui.highlight()#
The monster.ui.highlight()
method quickly highlights an element then fades it back to normal, from blue to gray by default.
Syntax#
monster.ui.highlight(element[, options]);
Parameters#
Key | Description | Type | Default | Required |
---|---|---|---|---|
element |
Target element to highlight. | jQuery |
true |
|
options |
Object (#/options) |
false |
options#
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 |
Description#
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.
Examples#
Highlight an element using the default settings#
var target = $('#element_to_highlight');
monster.ui.highlight(target);
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.');
}
});
#3B3
then fade it back to white #FFF
in 5 seconds, and finally display a message in the console.