Using Opacity to Show Focus with MooTools

Discussion

1. nicolas Santos

   Works now.
   You can delete all my comments. sorry.
2. Timothy

   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. Ryan Rampersad

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

   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. Silver Firefly

   Cool demo. But I agree with Adriaan.
7. David Walsh

   Weird — I can’t duplicate the issue.
8. Adriaan

   @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

   nice! can you do this on jQuery?
10. David Walsh

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

    Lovely, great idea :)
12. EmEhRKay

    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. Aaron Newton

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

    wow! nice effect
15. David Walsh

    @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. Jeff

    @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. Adriaan

    @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. alelo

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

    where is the jquery version?
21. David Walsh

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

    Like this one! Thx.
23. James Lin

    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. Chris Bolson

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

    Great great work !!!

    How can I accelerate the fading tween ?

    Thx,

    Alex
33. Alex

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

    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); }
    				});
    			});
    		});
    	});
    })();	
    
37. Simon

    Great effect.

    But what if you want links on your images or list items (it doesn’t work for me)?

    By