jQuery Spotlight

Introduction

jQuery Spotlight is a jQuery plugin which allows you to highlight elements in your page using a 'spotlight' effect. This plugin is highly customizable and
requires no external css or images.

Options

The full range of possible options (showing defaults) is as follows:

$('div').spotlight({
	opacity: .5,				//spotlight opacity
	speed: 400,					//animateion speed
	color: '#333',				//spotlight colour
	animate: true,				//enable animation (if false 'speed' and 'easing' are irrelevant)
	easing: '',					//set easing from the jQuery Easing plugin
	exitEvent: 'click',		//set which event triggers spotlight to hide 
									//(must be a valid jQuery 'live' event type)
	onShow: function(){},	//callback function after spotlight is shown
	onHide: function(){}		//callback function after spotlight is hidden
});
		

Demo

Demo 1 - Positioning
Demo 2 - Different Elements

Notes

Please note that this plugin is only compatible with browsers that support pure CSS opacity. This means that all versions of IE are currently not supported.