Using Opacity to Show Focus with jQuery

Written by David Walsh on Thursday, August 27, 2009

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.

View Demo

The jQuery Javascript

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

View Demo

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

Download PDF

Follow via RSS Epic Discussion

August 27 / #

David Walsh says:

I should add that the syntax to accomplish this goal is somewhat ugly, which is why I prefer MooTools. Case in point:

$(this).siblings().stop().fadeTo(500,0.5);

First, “siblings.stop()” doesn’t make sense because you don’t stop elements, you stop events. Second, the “fadeTo” method’s first argument is duration and not fade level. Why isn’t the method’s first argument the primary attribute it’s going to modify?

August 27 / #

Tim Wright says:

Very nice, I like that. Thanks for posting!

August 27 / #

LeRoy Lee says:

Nice effect. The list objects in the second demo seem to have a weird issue where the number 1 in the first li sort of disappears in Firefox 3.5.

August 27 / #

David Walsh says:

@LeRoy Lee: It must be a FF3.5 issue because there’s nothing code-wise that would cause that.

August 27 / #

Aaron Newton says:

Just noticing the lack of Christina Ricci in your posts lately… Have you moved on?

August 27 / #

Zac says:

Awesome effect. Works fine in Firefox 3.5 for me…

August 27 / #

nice says:

oooeee!
jQuery is nice, I like that. Thanks!

August 27 / #

choen says:

nice… it so cute.

August 27 / #

Pockata says:

Very nice. Just what i was looking for :)

August 27 / #

David Walsh says:

@Aaron Newton: Bite your tongue — Ms. Ricci is the only one for me.

August 28 / #

Adriaan says:

@David: I experience the same bug as on the mootools version…very weird…it doesn’t happen with chrome though…so it must be a firefox issue.

August 29 / #

John Brooks Pounders says:

Great tip, found you via Reddit. Upvote!

August 29 / #

Eric TF Bat says:

Not bad. Will it take much extra effort to get it working with keyboard focus as well? Not everyone relies on mice for navigation…

August 30 / #

Omer Rosenbaum says:

Looks interesting. How do I use it?
I mean, can you upload a demo file with the complete tutorial?

September 01 / #

Graham says:

Looks very nice. I can see using that as a nice visual aid that has no impact on accessibility. One note: don’t confuse this with showing keyboard focus (e.g. changing the background of an editable control when the caret is in it). I would say it’s more like showing hot-spots.

September 03 / #

RaphaelDDL says:

jQuery <3

Nice effect David! Thanks for sharing :)

September 09 / #

ndo says:

Hey, this works great I figured it out for my website gallery, I have a thought though. Is it possible to get it to fade like that when you click a scroll (or the navigator plugin) button. So that while the jquery scrollable is scrolling from one div etc. to the next it fades out, and then fades back in when the scrollable is finished scrolling?

September 11 / #

David says:

Love this. Any chance of a Mootools version?

September 11 / #

David says:

Got ahead of myself there didn’t I, lol. Dave you’re a star, thanks:)

September 18 / #

Jhon Doe says:

Nice effect …great in active links!! ;(

September 24 / #

Little Doe says:

I have never done any of this kind of thing before, and it’s working awesome for me!!!
I’m in love with it; before I’d have to put all the images in flash to make such an effect. WELL DONE!

October 26 / #

Marjan says:

Hello,

well done.

Someone else having problems in IE7 on WINXP? Text gets blury, distorted.

Someone know what could it be?

October 29 / #

Actarus says:

I have the same problem in IE7, the text change, but I don’t find a solution…

Help ;-)

November 03 / #

Zander says:

Hmmm.. this reminds me of a very similar effect on jQuery Style, I think your solution is a bit better though. Cheers

November 11 / #

Tyran says:

Hi, works a treat but for one little issue which I cannot solve. The top tabs on my new site http://www.trial.dcprint.co.uk have a tendency to jump around in IE depending on which one is clicked or where the pointer is placed. Only happens on first load and then seems to settle down until clicked again. Firefox no issues, but Opera 10.0 doesn’t run the effect at all.

November 27 / #

TheBAT says:

It’s an awesome effect. Works fine in Firefox… but not in IE !

I’m using it on PNG images (with transparency) and unfortunately, when the mouse leave the image, an ugly “border” appears.

If anyone have a solution…

December 18 / #

Samuel Larsson says:

Hi! I´m using your script at http://www.emmaeriksson.se/sopor-i-neapel, and it works great.

I´m just curious, how would you select JUST the thumbnails for the effect? You know, make it work not on all siblings but just images w a certain class? I´m kinda new at jQuery and I´ve worked tried hard to modify your script without any success…

Thank you for a great page!

December 29 / #

Rodrigo says:

How can I to downlad the code?

January 19 / #

barneyy says:

Hi David,

really awesome, this is really really really nice for me – i’m a jquery-beginner and got it to work for my galleries.

thx a lot for this snippet of code….

January 29 / #

Derleth says:

gracias amigoo, es simple y muy bueno.. me encanto :D

January 31 / #

Marc says:

Thanks a lot for this. Was all working great for me until I looked at it in IE8 – it works as you have it but if you add links to the images then the effect stops working – any way to fix this?