定番
新着
履歴

jQuery 透明度を変更する

jQuery 透明度を変更する
jQuery 透明度を変更する
画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。

ボタンを押すと10段階で画像の透明度が上がり、画像が消えて行きます。

fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールするサンプルになっています。

画像を少し透明にする
元に戻す

JSはこちら

$(document).ready(function(){
	op = 10;
	$('.fadeout_btn').on('click',function(){
		if(op>0){
			op = op - 1;
			$("#demo_area").fadeTo("slow",op/10);
		}
	});
	$('.reset_btn').on('click',function(){
			op = 10;
			$("#demo_area").fadeTo("slow",op/10);
	});
});

わかりやすくするために、赤いバーや透明度の出力は省略しています。

透明度は最大が1で、透明が0なので、0.1ずつ減らしています。

(整数で引き算引き算をして、少数にしてしているのは、JSでなぜか少数に誤差がでるためです)

最後に、上記の応用で、画像を重ねてマスクする仕掛けを実装しました。

ここをタップ!

こちらは5段階の透明度です。

JSはシンプルです。

$(document).ready(function(){
	op = 10;
	$('#demo_mask').on('click',function(){
		if(op>0){
			op = op - 2;
			$("#demo_mask").fadeTo("slow",op/10);
		}else{
			op = 10;
			$("#demo_mask").fadeTo("slow",op/10);
		}
	});
});
2019-01-30 22:58:36
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top