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

サイト構築 -JavaScript

Post on:2009年8月28日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

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

Using Opacity to Show Focus with jQuery
demo

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

demo: text

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

<textarea name="code" class="js" cols="60" rows="5">
$(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);
	});
});
</textarea>