Create A Fading Background In Jquery

A little while ago I read a tutorial on FriendlyBit about how to create a fading background in CSS. I quoted on that blog that this same effect would be more reliable and effective in jQuery. Actions speak loader than words, so I thought I would dedicate a short tutorial to show how this can be achieved.

Here is the demo

1 – Call In Jquery

To start off we will need to attach jquery, if you do not have a copy you can download it from jquery.com. Once you have this create a new file call it fade.html and call the jquery framework into the page.

2 – Set the Scene

Lets create some basic HTML which we can create the effect on, like so.

<div class="row1">
	highlight text
</div>
<div id="box">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="box1">
</box1>

This will give us a link to click and some text to highlight.

3 – Style It Up

Now we want to add some styling to the page.

.row1{
	padding: 10px;
	cursor:pointer;
	text-decoration: underline;
}
#box {
	padding: 10px  5px  5px  20px;
	width:400px;
	z-index:2;
	position:absolute;
}
.box1 {
	background-color: #CEDEEE;
	border: 2px solid #107FC9;
	width:390px;
	height:70px;
	position:absolute;
	margin: 5px;
	top:45px;
	z-index:1;
	opacity:0.00;
}

Its important to note the styles above have been created as position absolute. I call this the mirror method, becuase If you look at the html you can see another div called box1 which contains nothing. This is actually what were going to fade in and out. So we dont interfere with the text, we want this div to sit behind the box. Notice also that box1 has been set with an opacity:0.00; meaning we wont be able to see it straight off.

4 – The Smart Part

Now we are going to use just a few simple lines of code to animate a fade effect.

	$(function(){
		$('.row1').click(function(){
			$('.box1').animate({opacity:0.99}, 1000);
			$('.box1').animate({opacity:0}, 1000);
		});
	});

Lets break this down. Firstly we want this function to initiate onload, so we open with $(function(){ Inside of this we have a click funciton, attached to the div class row1 this means when we click the words ‘highlight text’ we trigger the function.Inside of this we simple run two simple lines of code. The first acts upon the div with a class of box1. The first argument picks the css selector, in this case the opacity and turns it up to almost full (0.99), the second argument sets a time in milliseconds, which the animate is to complete by, in this case 1000 milliseconds. underneath this we duplicate this code but with 1 key difference, we switch the opacity back down again. ths giving us a fading effect.

So in just a few lines we have achieved a very fancy effect, which can be used multiple times. Simple as that!

Click here to see the demo in action.