jQuery Plugin To Dim The Current Page Background - Dim Background
File Size: | 13.5 KB |
---|---|
Views Total: | 5935 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Dim Background is a simple jQuery plugin that allows to dim the current page background to highlight the user-defined top element, similar to the lightbox overlay effect. For example, you can create a top element that anything else on the page becomes dimmed when you hover over it.
Basic Usage:
1. Include jQuery library and jQuery Dim Background plugin on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.dim-background.js"></script>
2. Create a top element
<div id="actionBox"> ... </div>
3. The javascript
<script type="text/javascript"> $(function(){ $('#actionBox') .mouseenter(function(){ $(this).dimBackground({ darkness : 0.8 // 0: no dimming, 1: completely black }); }) .mouseleave(function(){ $(this).undim(); }); }); </script>
Change logs:
2015-01-22
- v1.3.1
2014-06-28
- Fixed a bug.
This awesome jQuery plugin is developed by andywer. For more Advanced Usages, please check the demo page or visit the official website.