[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus

画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。

Using Opacity to Show Focus with jQuery
demo

デモではフォーカスした画像以外の不透明度をフェードで変更します。
また、画像だけでなくテキストでも同様の効果が得られます。

demo: text

スクリプトのベースにはjQueryを使用しており、下記のスクリプトを記述します。

$(document).ready(function() {
	//area 1
	$('.fade-area-1').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
	//area 2
	$('.fade-area-2').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
});