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

サイト構築 -JavaScript

Post on:2009年8月28日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトを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>