Overlay-like Effect with jQuery

Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.

First, we need to define which elements we want to apply the effect to, meaning that we either want to animate the element’s opacity or color, or both. To the elements we want to fade, we will give the class “e-fade” and to the elements we want to change the color, we will give the class “e-color”. For any of these elements, no matter if we apply one or the other, or both classes, we will need to give the class “effect”.

An example for using these classes is the following HTML structure:

<!-- Animates the color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>

<!-- Animates the opacity -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>

<!-- Animates both color and opacity -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>

In our example we will use a menu to trigger the animation events. When we mouse over the menu items, the regarding element’s effects will get executed.

To enhance certain elements, we will have one more class, one that will let us know that these elements should be left untouched by the animations. This will give us the possibility to focus on certain elements.
The class name will be the same like the ID for one of the menu items. That way, we are creating a relation between them:

<ul id="menu" class="menu">
	<li><a href="#"><img src="images/1.png" alt="1"/></a></li>
	<li><a href="#"><img src="images/2.png" alt="2"/></a></li>
	<li><a href="#"><img src="images/3.png" alt="3"/></a></li>
	<li><a href="#"><img src="images/4.png" alt="4"/></a></li>
	<li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li>
</ul>

...

<h3 class="effect-n">Vapour around me</h3>

As you can see, the last menu item will receive the respective ID and the h3 will receive a class with the same name. So, when we hover over that menu item, all the other elements (that have the previous effect classes) will be animated, except this one.

Now, let’s look at the JavaScript.
Let’s start by caching some elements:

var $menu			= $('#menu'),
	$container		= $('#container'),
	$content		= $container.find('.content');

We will add the classes for the effects using jQuery instead of going to each single element in the HTML and adding it “manually”:

	
$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');

Now we will get all the elements that have the class “effect” and define the OverlayEffect function that will take care of the animations:

	
var $elems			= $(document).find('.effect'),
	OverlayEffect 	= (function(){
			//speed for animations
		var speed				= 1000,
			//the event that triggers the effect
			eventOff			= 'mouseenter',
			//the event that stops the effect
			eventOn				= 'mouseleave',
			//this is the color that the elements will have after eventOff
			colorOff			= '#AAAAAA',
			//saves the original color of each e-color element,
			//and calls the methods to initialize the events
			init				= function() {
				$elems.each(function(){
					var $el		= $(this);
					if($el.hasClass('e-color'))	
						$el.data('original-color',$el.css('color'));
				});
				initEventsHandler();
			},
			//initializes the events eventOff / eventOn
			initEventsHandler 	= function() {
				$menu
				.delegate('a',eventOff,function(e){
					//relation is the id of the element, 
					//and the class of related elements
					var relation	= $(this).attr('id');
					animateElems('off',relation);
					return false;
				})
				.delegate('a',eventOn,function(e){
					var relation	= $(this).attr('id');
					animateElems('on',relation);
					return false;
				});	
			},
			//animates the color and / or opacity
			animateElems		= function(dir,relation) {
				var $e	= $elems;
				
				switch(dir){
					case 'on'	:
				//if there are elements on the page with class = relation
				//then these elements will be excluded from the animation
						if(relation)
							$e	= $elems.not('.'+relation);
						
						$e.each(function(){
							var $el		= $(this),
								color	= $el.data('original-color'),
								param	= {};
							
							if($el.hasClass('e-color'))
								param.color		= color;
							if($el.hasClass('e-fade'))
								param.opacity	= 1;

							$el.stop().animate(param,speed);	
						});
						
						break;
					case 'off'	:
						if(relation)
							$e	= $elems.not('.'+relation);
						
						$e.each(function(){
							var $el		= $(this),
								param	= {};
							
							if($el.hasClass('e-color'))
								param.color		= colorOff;
							if($el.hasClass('e-fade'))
								param.opacity	= 0.1;

							$el.stop().animate(param,speed);	
						});
						
						break;
				}
			};
			
		return {
			init				: init
		};
	})();
	
/*
call the init method of OverlayEffect
*/
OverlayEffect.init();
});

And that’s it!
I hope you enjoyed this tutorial and find it useful!