ボックス要素を不透明から半透明に変更するフェードアウトアニメーション

投稿日: 2014年3月14日作成者: alphasis

ボタンクリックで、ボックス要素を不透明から半透明に徐々に変更するフェードアウトのアニメーションのJavaScriptサンプル。

jQuery APIのfadeOut( duration )などを使えば簡単だが、JavaScriptだけで作ってみた。

サンプル（実装例）

実装例の動作について

「不透明から半透明に」ボタンをクリックすると、背景色が赤色のボックス要素の不透明度を「1」から「0.5」に徐々に変更するフェードアウトのアニメーションを実行する。

ソースコード

JavaScript

<script type="text/javascript">
function changeOpacity( $a, $b ) {
document.getElementById( "sampleButton" ).disabled = true;
var $intervalID = setInterval(
function(){
main();
},
20
);
function main() {
var $targetElement = document.getElementById( "sample" );
$a = $a - 0.01;
if( $a >= $b ){
$targetElement.style.cssText = "opacity:" + $a + ";";
}else{
clearInterval( $intervalID );
document.getElementById( "sampleButton" ).disabled = false;
}
}
}
</script>

HTML

<button id="sampleButton" onclick="changeOpacity( 1, 0.5 );">不透明から半透明に</button>
<div id="sample"></div>

CSS

<style>
#sample {
width: 150px;
height: 150px;
background-color: red;
}
</style>

解説

JavaScript

<script type="text/javascript">

// 不透明度を表す２つの仮引数「$a、$b」を受け取るユーザー定義関数
function changeOpacity( $a, $b ) {

// id属性値が「sampleButton」であるボタンを無効化
document.getElementById( "sampleButton" ).disabled = true;

// 10ミリ秒ごとに「main()」関数を呼び出す繰り返しタイマー
var $intervalID = setInterval(
function(){
main();
},
20
);

// // 1ミリ秒ごとに呼び出されるユーザー定義関数
function main() {

// id属性値が「sample」である要素への参照を変数「$targetElement」に代入
var $targetElement = document.getElementById( "sample" );

// 不透明度を表す変数「$a」に「0.01」を加算
$a = $a - 0.01;

// 不透明度が、変数「$b」の値以上の場合
if( $a >= $b ){
// スタイル属性値を指定
$targetElement.style.cssText = "opacity:" + $a + ";";

// 不透明度が、変数「$b」の値以上でない場合
}else{

// 繰り返しタイマーを中止
clearInterval( $intervalID );

// id属性値が「sampleButton」であるボタンを有効化
document.getElementById( "sampleButton" ).disabled = false;

}

}

}

</script>

主に使用した構文、プロパティ、メソッド、イベント等。

カテゴリー: JavaScript, アニメーション, 逆引きパーマリンク