たとえば下記のようになります。
js
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title>lesson03 アニメーション2</title>6 <link rel="stylesheet" type="text/css" href="base.css">7</head>8<body>9 <div id="wrapper">10 <div class="box">11 <button id="button" type="button">フェードアウト</button> 12 <img id="image" src="./images/outsourcing.jpg" alt="サンプル画像">13 </div>14 </div><!-- wrapper -->15 </div><!-- wrapper -->16 17 18 <script>19 const button = document.getElementById('button');20 const image = document.getElementById('image');21 let isFadeOut = true;22 let intervalId = 0;23 24 window.addEventListener('beforeunload', (e) => {25 clearInterval(intervalId);26 }, false);27 28 31 32 33 34 35 36 37 function fadeAnimation(element, opacStart, opacEnd, durationMS, buttonCaption) {38 let intervalMS = 10;39 let steps = Math.floor(durationMS / intervalMS);40 if (steps == 0) steps = 1;41 let opacStep = (opacEnd - opacStart) / steps;42 let opacity = opacStart;43 intervalId = setInterval(function(){44 if (steps <= 0) {45 element.style.opacity = opacEnd;46 clearInterval(intervalId);47 isFadeOut = !isFadeOut;48 button.textContent = buttonCaption;49 button.disabled = false;50 }51 element.style.opacity = opacity;52 opacity += opacStep;53 steps--;54 }, intervalMS);55 }56 57 button.addEventListener('click', function() {58 button.disabled = true;59 if (isFadeOut) {60 fadeAnimation(image, 1, 0, 1000,'フェードイン');61 } else {62 fadeAnimation(image, 0, 1, 1000,'フェードアウト');63 }64 });65 </script>66</body>67</html>
上記のfadeAnimationの中で、 intervalMS ミリ秒の間隔で、指定した透明度を少しずつ変化させています。（43行目から55行目）
「持続時間÷間隔=ステップ数」だけ、透明度の変更を繰り返し、所定のステップ数に達したら、clearInterval を呼んで繰り返しを止めます。（44～50行目）
（setInterval 関数は設定時にintervalIdを返します。clearInterval関数 にその intervalId を指定して呼ぶことで、繰り返しを止めることができます）
-
フェードイン/アウト中はボタンを無効化することでフェードイン/アウト処理中にフェードアウト/イン処理が始まってしまうことを防いでいます。（58行目）
-
24行目は、フェードイン/アウト中にウィンドウが閉じられたり別のページに遷移されてしまったときにclearIntervalを呼ぶための処理です。これがないと、延々とsetIntervalが呼ばれ続けます。
0 コメント