Using Opacity to Show Focus with jQuery

Discussion

1. David Walsh

   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?
2. Tim Wright

   Very nice, I like that. Thanks for posting!
3. LeRoy Lee

   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.
4. David Walsh

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

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

   Awesome effect. Works fine in Firefox 3.5 for me…
7. nice

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

   nice… it so cute.
9. Pockata

   Very nice. Just what i was looking for :)
10. David Walsh

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

    @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.
12. John Brooks Pounders

    Great tip, found you via Reddit. Upvote!
13. Eric TF Bat

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

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

    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.
16. RaphaelDDL

    jQuery <3

    Nice effect David! Thanks for sharing :)
17. ndo

    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?
18. David

    Love this. Any chance of a Mootools version?
19. David

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

    Nice effect …great in active links!! ;(
21. Little Doe

    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!
22. Marjan

    Hello,

    well done.

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

    Someone know what could it be?
23. Actarus

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

    Help ;-)
24. Zander

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

    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.
26. TheBAT

    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…
27. Samuel Larsson

    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!
28. Rodrigo

    How can I to downlad the code?
29. barneyy

    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….
30. Derleth

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

    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?
32. chip

    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.
33. Joey William S.

    Very cool! Nie effect… Thanks!
34. Magbic Aleman

    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');
       }
    });
    
35. Alan Mabry

    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
36. Daniel Due

    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.
37. Luinet

    Gracias muy bueno……
38. silverpen

    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.
39. Johnathan

    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.
40. Jonathan

    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
41. davide

    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
42. Zander

    Hi David, this effect can actually be achieved with pure CSS, checkout my demo on Codepen: http://codepen.io/mrmartineau/pen/frwKH
• David Walsh

  Yep! CSS animations have come a along way since this post was original published!