A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here’s how to accomplish that feat using jQuery.

The jQuery JavaScript

$(document).ready(function() {
	
	$('.fade-area-1').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
	
	$('.fade-area-2').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
});

There you have it. Opacity is a very simple but effective tool for building an attractive interface.