ボタンを押すと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でなぜか少数に誤差がでるためです)