Javascriptで画像や文字などを徐々に変化させる（表示させたり消したりする）方法

本記事ではJavascriptを使って画像などを徐々に変化させる（表示させたり消したりする）方法を紹介します。

（※画像でなくとも文字やボックス等、何でも可能です。）

なぜ画像を徐々に表示させたいか
徐々に変化させる２つの方法
opacityの値を変化させる方法
display:none;で消す方法
改善ポイント・今後の課題

なぜ画像を徐々に表示させたいか

僕は最近Webアプリ製作にハマっています。

その中で、ボタンを押したときに「正解！」という文字と画像を表示させて徐々に消す設定を実装しようと、色々試行錯誤していました。

その結果僕なりに２つの方法を考えました。

※追記
何か色々書きましたが、試行錯誤の結果できました。
《実装例はこちら》
javascript_img_change.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JSで徐々に変化</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles2.css">
        
</head>
<body>
    <div id="container">
        <div id="btn">徐々に消える</div>
        <div id="btn2">パッと消える</div>
        <div id="panel" class="hidden">PANEL</div>
        <div id="panel2" class="hidden">PANEL2</div>
    </div>
<script src="js/main2.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JSで徐々に変化</title>

</head>

<body>

<div id="btn">徐々に消える</div>

<div id="btn2">パッと消える</div>

<div id="panel" class="hidden">PANEL</div>

<div id="panel2" class="hidden">PANEL2</div>

</div>

</body>

</html>

styles2.css

body {
    background: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

#container {
    margin: 20px auto;
    width: 300px;
}

#btn,#btn2 {
    margin-bottom: 20px;
    background: #00aaff;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    height: 70px;
    line-height: 70px;
    box-shadow: 0 10px 0 #ff6fff;
    user-select: none;
    cursor: pointer;
}

#btn:hover, #btn2:hover {
    opacity: 0.8;
}

#btn:active, #btn2:active {
    box-shadow: none;
    margin-top: 30px;
    margin-bottom: 10px;
}

#panel,#panel2 {
    background: #fff;
    border-radius: 10px;
    text-align: center;
    width: 100px;
    height: 70px;
    line-height: 60px;
    border: 5px solid #ccc;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    float: left;
    transition: 1s;
}

.changed {
    opacity: 0;
    color: red;
}

.hidden {
    display: none;
}

body {

background: #e0e0e0;

font-family: Arial, sans-serif;

font-size: 20px;

font-weight: bold;

}

#container {

margin: 20px auto;

width: 300px;

}

#btn,#btn2 {

margin-bottom: 20px;

background: #00aaff;

border-radius: 10px;

text-align: center;

width: 100%;

height: 70px;

line-height: 70px;

box-shadow: 0 10px 0 #ff6fff;

user-select: none;

cursor: pointer;

}

#btn:hover, #btn2:hover {

opacity: 0.8;

}

#btn:active, #btn2:active {

box-shadow: none;

margin-top: 30px;

margin-bottom: 10px;

}

#panel,#panel2 {

background: #fff;

border-radius: 10px;

text-align: center;

width: 100px;

height: 70px;

line-height: 60px;

border: 5px solid #ccc;

user-select: none;

cursor: pointer;

box-sizing: border-box;

float: left;

transition: 1s;

}

.changed {

opacity: 0;

color: red;

}

.hidden {

display: none;

}

main2.js

(function() {
    'use strict';
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');
    var panel = document.getElementById('panel');
    var panel2 = document.getElementById('panel2');
    var timerId;
    var timerId2;
 
    function count() {
        timerId= setTimeout(function() {
            panel.className = "changed"; 
        }, 1000);  
    }
    function count2() {
        timerId2= setTimeout(function() {
            panel2.className = "hidden"; 
        }, 1000);  
    }
    
    btn.addEventListener('click',function() {
        clearTimeout(timerId);
        panel.className = "";
        count();
    });
    btn2.addEventListener('click',function() {
        clearTimeout(timerId2);
        panel2.className = "";
        count2();
    });
    
})();

(function() {

'use strict';

var btn = document.getElementById('btn');

var btn2 = document.getElementById('btn2');

var panel = document.getElementById('panel');

var panel2 = document.getElementById('panel2');

var timerId;

var timerId2;

function count() {

timerId= setTimeout(function() {

panel.className = "changed";

}, 1000);

}

function count2() {

timerId2= setTimeout(function() {

panel2.className = "hidden";

}, 1000);

}

btn.addEventListener('click',function() {

clearTimeout(timerId);

panel.className = "";

count();

});

btn2.addEventListener('click',function() {

clearTimeout(timerId2);

panel2.className = "";

count2();

});

})();

徐々に変化させる２つの方法

色々ネットも参考にさせてもらった部分はあるんですが、以下の２つの方法を今回は紹介しようと思います。

opacityの値を徐々に減らす（又は増やす）方法
display: none;で消す方法

もちろん、まだ改良の余地はあると思いますが、備忘録代わりに書いておきます。

opacityの値を変化させる方法

opacityは0~1の間で透明度を指定するプロパティです。

0が透明、1が不透明です。

ボタンを押したときにまずは画像を表示させ、そこから「opacityの値を0.01ずつくらい0.01秒間隔で引いていく」という処理を繰り返す事で、徐々に画像を消して行こうと思います。

ボタンを押すと画像が表示される
opacityの値が1から0へと徐々に変化
画像が消える（消えたように見える）

実際に作ってみたので、まずはボタンを押してみてください。

《実装例》

setTimeoutを使って、一定間隔で繰り返し処理をさせます。

関数の中に入れたsetTimeoutの処理の中にその関数自身を入れるところがポイントです。（この処理はストップウォッチとかでも使いますよね。）

実際のコードは以下です。

display:none;で消す方法

こちらの方法では「徐々に消す」、ではなく、パッ、パッと表示させたり消したりする方法です。

もしかしたらtransitionとか使ったら徐々にできるのかもしれませんので、もしできるようになったら追記しようと思います。

今回はパッ、パッと切り替わります。実装例は以下のようになります。

コードは以下です。こちらもsetTimeoutを使います。

※追記
main2.jsファイル内の
「panel.className = “changed”;」の部分を
「panel.className = “hidden”;」に変えればOKです。

改善ポイント・今後の課題

「opacityの値を変化させる方法」では画像をしばらく表示させて、それから徐々に消していきたいです。

setTimeoutを駆使すれば出来るとは思うのですが、連続してボタンを押したときにうまく行ってくれません。

多分clearTimeoutの使い方が悪いんだと思ってはいるんですが・・・。

以下が１秒画像表示させた後に、徐々に消していく実装例です。

２回目以降がうまく作動しません。

※追記
色々書いたのですが結局できちゃったので、記事の最初の方でまとめました。気になるのは1回目のクリックと、2回目以降ではパネル出現の方法が違うということですね。hiddenが外れる処理にもtransitionがかかってしまっています。

もしご助言ありましたら宜しくお願い致します。

以上です。