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-1.png

Recent Features

  • 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,...

  • 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...

Incredible Demos

  • Create Snook-Style Navigation Using MooTools

    Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools. The Images These are the same...

  • MooTools dwCheckboxes Plugin

    Update / Fix: The checkboxes will no longer toggle when the "mouseup" event doesn't occur on a checkbox. Every morning I wake up to a bunch of emails in my Gmail inbox that I delete without reading. I end up clicking so many damn checkboxes...

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!