jQuery Plugin To Create Spotlight Effect On Any Elements - spotlight

Yet another jQuery highlight plugin that adds a customizable spotlight effect to any elements in your document. The plugin creates a full window mask overlay on useless elements in the webpage to bring your user's focus to specified element.

See also:

• jQuery Plugin To Set Focus On Any DOM Element - Focusable
• jQuery Plugin To Highlight Any DOM Elements - revealElements.js
• jQuery Plugin To Create Canvas Based Animated Spotlight Effects
• jQuery Plugin To Focus/Highlight Any Elements - focusify

How to use it:

1. Load the jquery.spotlight.js after you have jQuery installed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.spotlight.js"></script>

2. Add the spotlight effect to a given element on mouse hover.

$('SELECTOR').bind('mouseover', function(){
  $(this).spotlight({exitEvent:'mouseover'});
});

3. Add the spotlight effect to a given element on click.

$('SELECTOR').click(function(){
  $(this).spotlight();
});

4. Remove the spotlight effect.

$(SELECTOR).spotlight().unspotlight();

5. Available options.

$fn.spotlight({

// spotlight opacity. 0-1
opacity: .5,

// animateion speed in ms
speed: 400, 

// overlay color
color: '#333', 

// enable animation
animate: true,  

// requires jQuery easing plugin
easing: '', 

// set which event triggers spotlight to hide 
exitEvent: 'click',

// callback function after spotlight is shown
onShow: function(){},   

// callback function after spotlight is hidden
onHide: function(){}

});

---

This awesome jQuery plugin is developed by MarQuisKnox. For more Advanced Usages, please check the demo page or visit the official website.