mootools_使用不透明度通过MooTools显示焦点

mootools

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.

我非常喜欢使用链接链接( jQuery ， MooTools )之类的微妙效果来增强用户体验并增加我的网站的动态感。 相信我-网站上的许多小事情都可以使网站更上一层楼。 我喜欢用来增加动态感的一种技术是不透明度。 以下MooTools代码捕获了除所关注元素之外的其他元素，并将其淡入到50％，从而增加了对悬停项目的关注。

MooTools JavaScript (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!

我们抓住元素组的兄弟姐妹(除了关注的项目之外)并淡化它们的不透明度。 很少的代码，几乎没有效果，在动态感上有很大的不同！

翻译自: https://davidwalsh.name/opacity-focus

mootools