Using Opacity to Show Focus with MooTools

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

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.

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.

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

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…

Cool demo. But I agree with 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.

nice! can you do this on jQuery?

Lovely, great idea :)

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?

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

wow! nice effect

@Adriaan

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

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

@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…

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

where is the jquery version?

Like this one! Thx.

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/

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 :)

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.

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)

Russia. Online Translator =)

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

Look

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

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

shit! dont work on mootools 1.11 Joomla 1.5 ((

but this problem can be solved =)

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

Great great work !!!

How can I accelerate the fading tween ?

Thx,

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 ?

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

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?

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