Treehouse

Using Opacity to Show Focus with MooTools

By on  
MooTools Focus

I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level. One technique I like to use to achieve added dynamism is opacity. The following MooTools code grabs elements other than the one being focused on and fades them to 50%, thus increasing focus on the hovered item.

The MooTools JavaScript

(function() {
	window.addEvent('domready',function() {
		$$('.fade-area').each(function(container) {
			container.getChildren().each(function(child) {
				var siblings = child.getParent().getChildren().erase(child);
				child.addEvents({
					mouseenter: function() { siblings.tween('opacity',0.5); },
					mouseleave: function() { siblings.tween('opacity',1); }
				});
			});
		});
	});
})();

We grab the siblings of the element group except the focused-on item and fade their opacity. Little code, little effect, big difference in perceived dynamism!

ydkjs-3.png

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

Discussion

  1. Works now.
    You can delete all my comments. sorry.

  2. Really nice effect. I’ve seen something similar which does not use opacity, but just adjusts background-position on the other elements to make them look blurred.

  3. adamnfish

    Nice fade out speed but the fade in speed needs to be much quicker. At the moment it delays focus on the hovered item for too long which makes the demo feel sluggish and unresponsive.

  4. That’s a very nice feature. Have you tried it when you have more than 50 images being faded like in a gallery?

  5. Nice, but in Firefox, when I hover on the list items (not the first one), something covers part of the 1 of the first list item…weird…

  6. Cool demo. But I agree with Adriaan.

  7. Weird — I can’t duplicate the issue.

  8. @David: I sent you a screenshot.

    I now also notice that if you look closely, 1 pixel on the right side of item 5, is also cut off when it is faded out…it doesn’t seem to happen with any other items, other than 1 and 5 though.

  9. nice! can you do this on jQuery?

  10. @Adriaan: Thanks for the screenshot, but I still can’t duplicate this. Very odd.

  11. Lovely, great idea :)

  12. Again, how do you come up with this stuff. Very solid and useful.

    Could the collection of siblings be done once outside of the each call and an every() filter be run during the mouseenter events (mouseleave can just set every item’s opacity to full)

    mouseenter: function(){ siblings.every(function(item){if(item !== this) item.tween(... 
    

    or is that more intensive?

  13. I think you should use Fx.Elements instead of numerous Fx.Tweens. This won’t scale well…

  14. wow! nice effect

  15. @Aaron Newton: I see your point but I wouldn’t use this on a ton of elements — this is best for a small group of them.

  16. @Adriaan

    Is it possible you have the zoom setting in your browser turned on? That messes with all kinds of things.

  17. Chris

    Nice! I’d like to use this on my blog. Any chance of getting this in jQuery? :)

  18. @Jeff: mmm, interesting point, my zoom is at the default setting, but when I zoom in, the problem disappears…maybe it’s because my resolution is very high: 1920×1200…

  19. have the same problem that Adriaan has, but i use 1680×1050 maybe a moz-bug?

  20. javier

    where is the jquery version?

  21. Let me know when you’ve written it Javy!

  22. Like this one! Thx.

  23. This is a nice effect!

    You can also get a similar one with just pure CSS. You won’t get that nice transition effect, but if you aren’t using Moo Tools on your site it’s a good solution. I have a working example on the horizontal nav menu on this site I designed: http://www.pacificapetcare.com/ and since you’re just changing the background image you can do other neat effects like the menu here http://www.animehotornot.com/

  24. Simple and effective – nice one Dave!
    I have just added this in an adapted form to a script that I am currently working on that was, until now, using a similar but far more complicated fade effect.
    I am using it on 30 elements and it seems to be working fine.

    Thanks for sharing :)

  25. Listen2Me

    This is great. Anyone have any ideas how to adapt it to work on a data table? I’d love to use it for row highlighting.

  26. Ilya

    Hi! I am from Russia. Use online translator =)
    With png tried to do? In IE a black background appears … You can fix this + png fix ie 6?
    Thanks)

  27. Ilya

    Russia. Online Translator =)

    Problem Adriaan visible with decreasing scale. (Firefox) ctrl+-

    Look

    http://i.imagehost.org/0630/1_10.jpg

  28. Ilya

    in ie8 xhtml with a href not working ((( in html 4 work. bad…

  29. Ilya

    shit! dont work on mootools 1.11 Joomla 1.5 ((

  30. Ilya

    but this problem can be solved =)

  31. Ilya

    solved all problems except the list item but I do not need), a good example. Thanks!!!

  32. Great great work !!!

    How can I accelerate the fading tween ?

    Thx,

    Alex

  33. I have a small bug in IE 7 and 8 my styles changed ???? The typography change and my borders desapears when fading ???

    Do you have an idea why ?

  34. Very nice ;-) !!!

    But do you know why in the demo with IE7 and IE8 the text change and the list disapear ?

    I have the same problem with a border and texts in my new site ?

    Thx

    • Michael

      Hi,

      I have the same Problem. After hovering all borders in Internet Explorer disappear? Any solution?

  35. dailce

    Very strange error, how can I have this work with images that have links? if I add links to my images there is a very strange problem in safari and ie where the fade only affects 1/4 the image?

  36. dailce

    I guess this will work.

    (function() {
    	window.addEvent('domready',function() {
    		$$('.fade-area').each(function(container) {
    			container.getElements('img').each(function(child) {
    				var siblings = child.getParent('div').getElements('img').erase(child);
    				child.addEvents({
    					mouseenter: function() { siblings.tween('opacity',0.5); },
    					mouseleave: function() { siblings.tween('opacity',1); }
    				});
    			});
    		});
    	});
    })();	
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!