用途
新着
履歴
分類

jQuery 透明度を変更する

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

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

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

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

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-08-03 22:56:20
このページの二次元コード
jQuery 透明度を変更する

人気のサンプル

search -  category -  about
© 2024 kipure
Top