jQuery Image Fading

[LSCare]

I have struggled and struggled to find a script which creates a simple faded button (where the image is in the background attribute) for a long time.

Everything that I have found has used some weird attempt through add class and remove class which results inevitably in a fade through black (not what I wanted).

So... I came up with a simple device (a bit of a cheat) for avoiding needing to fade through black or use complex jQuery functions.

Insert:
The reason I wanted this to be in the background image is because I want a crisp site in which images are not dragable or easily copied.
It is also a tool which could be used outside of the navigational concept shown.

Notes:

• This example creates 2 buttons though the method is not limited to 2 (advise changing the l or r to a number or representative letter for more than two i.e. index: i about: a.
• The two buttons in this example are a simple left right method.
• To event catching div in this method will always be #nav_?_inv.
• The inv suffix stands for Invisible! Though it is visible to the browser it must remain invisible to any human. It cannot hold an image or BG colour.
• The mouseenter and mouseleave events can be changed to mouseover and mouseout respectively.
• CSS positioning is crucial (this is why I have used absolute and margins to position my divs.
• All CSS rules MUST be applied to all divs regarding size and position
• An example of the working script is currently (12/12/11) available here, though I cannot guarantee it will stay.

HTML

<!-- navigation -->
<div>
	<div id='nav_l_bot'></div>
	<div id='nav_l_top'></div>
	<div id='nav_l_inv'></div>
	<div id='nav_r_bot'></div>
	<div id='nav_r_top'></div>
	<div id='nav_r_inv'></div>
</div>

CSS

#nav_l_bot{
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 515px 0px 0px 100px;
	background:url(../images/nav_l_up.png) center no-repeat;
}

#nav_r_bot{
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 515px 0px 0px 450px;
	background:url(../images/nav_r_up.png) center no-repeat;	
}

#nav_l_top{
	// All the same as nav_l_bot except hover image below
	background:url(../images/nav_l_ho.png) center no-repeat;
}

#nav_r_top{
	// All the same as nav_r_bot except hover image below
	background:url(../images/nav_r_ho.png) center no-repeat;	
}

#nav_l_inv{
	// All the same as nav_l_bot except NO image
}

#nav_r_inv{
	// All the same as nav_r_bot except NO image
}

jQuery

$(document).ready(function(){

	// set tops to gone!
	$("#nav_l_top").fadeOut(0);
	$("#nav_r_top").fadeOut(0);

	// left nav over
	$("#nav_l_inv").mouseenter(function(){ 
		$("#nav_l_top").fadeIn(200); 
	});

	// left nav out
	$("#nav_l_inv").mouseleave(function(){ 
		$("#nav_l_top").fadeOut(200); 
	});

	// right nav over
	$("#nav_r_inv").mouseenter(function(){ 
		$("#nav_r_top").fadeIn(200); 
	});

	// right nav out
	$("#nav_r_inv").mouseleave(function(){ 
		$("#nav_r_top").fadeOut(200); 
	});

});

I hope other people find this helpful!

[LSCare]

Please do let me know if you think this has been helpful to you.

Also if you have any questions over the application of this then do not hesitate to ask.