Using Opacity to Show Focus with jQuery
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() {
//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);
});
});
There you have it. Opacity is a very simple but effective tool for building an attractive interface.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
I should add that the syntax to accomplish this goal is somewhat ugly, which is why I prefer MooTools. Case in point:
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?
Very nice, I like that. Thanks for posting!
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.
@LeRoy Lee: It must be a FF3.5 issue because there’s nothing code-wise that would cause that.
Just noticing the lack of Christina Ricci in your posts lately… Have you moved on?
Awesome effect. Works fine in Firefox 3.5 for me…
oooeee!
jQuery is nice, I like that. Thanks!
nice… it so cute.
Very nice. Just what i was looking for :)
@Aaron Newton: Bite your tongue — Ms. Ricci is the only one for me.
@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.
Great tip, found you via Reddit. Upvote!
Not bad. Will it take much extra effort to get it working with keyboard focus as well? Not everyone relies on mice for navigation…
Looks interesting. How do I use it?
I mean, can you upload a demo file with the complete tutorial?
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.
jQuery <3
Nice effect David! Thanks for sharing :)
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?
Love this. Any chance of a Mootools version?
Got ahead of myself there didn’t I, lol. Dave you’re a star, thanks:)
Nice effect …great in active links!! ;(
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!
Hello,
well done.
Someone else having problems in IE7 on WINXP? Text gets blury, distorted.
Someone know what could it be?
I have the same problem in IE7, the text change, but I don’t find a solution…
Help ;-)
Hmmm.. this reminds me of a very similar effect on jQuery Style, I think your solution is a bit better though. Cheers
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.
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…
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!
How can I to downlad the code?
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….
gracias amigoo, es simple y muy bueno.. me encanto :D
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?
I’m using this for the first time on a client site. Everything works great except when I make the images linked. The fade doesn’t work in safari. Is there a work around?
Seems Marc had the same problem in IE8. I got it to work in IE7 though.
Thank you very much, btw.
Very cool! Nie effect… Thanks!