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.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Camera and Video Control with HTML5]()
Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API...
![Input Incrementer and Decrementer with MooTools]()
Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...
![CSS Transforms]()
CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements. One or more transformations can be applied to a given element and transforms can even be animated...
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, thefadeTomethod’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!
I don’t know if any one cares to have this, but I translated this too mootools 1.2.4. Probably not the most optimized code, but it works.
iconAnchors.addEvents({ 'mouseenter' : function(){ iconAnchors.fade(.3); this.fade('in'); }, 'mouseleave' : function(){ iconAnchors.fade('in'); } });David,
Thank you for the great post. I have created an article which shows how to integrate your jQuery Opacity / Focus demo in Drupal with views.
http://breakingdevelopment.co/box/how-integrate-jquery-drupal-views-opacity-show-focus
The goal was to show how to modify views and page template files to incorporate jQuery without having to write a module or use a module that already exists.
Thank you for your indirect contribution to the Drupal community.
Alan Mabry
Partner
Breaking Development
http://www.breakingdevelopment.co
Best effect I’ve found since lightbox..
It really makes a website classy.. ;)
Although, IE8 and 7 won’t show it properly, my text is fucked up, when the hovering starts.. Lets hope, they fix it in IE9.. (Although I really doubt it). Since, microsoft, cares so little of webstandards.
Gracias muy bueno……
Is there any tweaks I can do to get this to coincide with jQuery collapse/expand?
http://www.adipalaz.com/experiments/jquery/expand.html
I’m making a database for users to submit items for archival purposes. Since there will be many categories, I’d love to have the categories separated and collapsed then expanded when clicked upon. After expansion, use this jQuery focus when they hover over an item and its details.
As of now, the jQuery focus doesn’t work when placed inside any version of a jQuery code that expands/collapses the content.
This is a great script — just spent the better part of the morning trying to do the same thing, using several “cheap work-arounds”, as I’m not really a programmer. This is really nice! You also have lots of other great scripts — Thank you for sharing.
Hi, is there a way to start with everything faded on a page, highlighting a particular div. Then when a user clicks away from the div, the opacity for everything else returns to normal?
Many thanks
Hi. I have to make a dynamic content so i need ti insert into the code the method live() can you explain how can i do it? Thanks
Hi David, this effect can actually be achieved with pure CSS, checkout my demo on Codepen: http://codepen.io/mrmartineau/pen/frwKH
Yep! CSS animations have come a along way since this post was original published!