回答編集履歴
4
ｄ
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[2023/12/23 14:06 時点の質問内容に対する回答]
|
|
1
|
+
[2023/12/23 14:06 時点の質問（コードが追記される前）の内容に対する回答]
|
|
2
2
|
たとえば下記のようになります。
|
|
3
3
|
```js
|
|
4
4
|
<!DOCTYPE html>
|
3
ｄ
answer
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
[2023/12/23 14:06 時点の質問内容に対する回答]
|
|
1
2
|
たとえば下記のようになります。
|
|
2
3
|
```js
|
|
3
4
|
<!DOCTYPE html>
|
2
余分な行を修正
answer
CHANGED
|
@@ -14,9 +14,6 @@
|
|
|
14
14
|
<img id="image" src="./images/outsourcing.jpg" alt="サンプル画像">
|
|
15
15
|
</div>
|
|
16
16
|
</div><!-- wrapper -->
|
|
17
|
-
</div><!-- wrapper -->
|
|
18
|
-
|
|
19
|
-
|
|
20
17
|
<script>
|
|
21
18
|
const button = document.getElementById('button');
|
|
22
19
|
const image = document.getElementById('image');
|
1
修正
answer
CHANGED
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
const button = document.getElementById('button');
|
|
22
22
|
const image = document.getElementById('image');
|
|
23
23
|
let isFadeOut = true;
|
|
24
|
-
let intervalId
|
|
24
|
+
let intervalId;
|
|
25
25
|
|
|
26
26
|
window.addEventListener('beforeunload', (e) => {
|
|
27
|
-
clearInterval(intervalId);
|
|
27
|
+
if (intervalId !== undefined) clearInterval(intervalId);
|
|
28
|
-
}
|
|
28
|
+
});
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
* フェードアニメーションを実行する関数。
|
|
32
32
|
*
|
|
33
33
|
* @param {HTMLElement} element - アニメーションを適用するHTML要素。
|
|
34
|
-
* @param {number} opacStart - アニメーション開始時の透明度(0.0から1.0まで)。
|
|
34
|
+
* @param {number} opacStart - アニメーション開始時の不透明度(0.0から1.0まで)。
|
|
35
|
-
* @param {number} opacEnd - アニメーション終了時の透明度(0.0から1.0まで)。
|
|
35
|
+
* @param {number} opacEnd - アニメーション終了時の不透明度(0.0から1.0まで)。
|
|
36
36
|
* @param {number} durationMS - アニメーションの持続時間（ミリ秒）。
|
|
37
37
|
* @param {string} buttonCaption - アニメーション終了後にボタンに表示するキャプション。
|
|
38
38
|
*/
|
|
@@ -69,12 +69,12 @@
|
|
|
69
69
|
</html>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
上記の`fadeAnimation`の中で、 intervalMS ミリ秒の間隔で、指定した透明度を少しずつ変化させています。（43行目から
|
|
72
|
+
+ 上記の`fadeAnimation`の中で、 intervalMS ミリ秒の間隔で、指定した不透明度を少しずつ変化させています。（43行目から54行目）
|
|
73
73
|
|
|
74
|
-
「持続時間÷間隔=ステップ数」だけ、透明度の変更を繰り返し、所定のステップ数に達したら、clearInterval を呼んで繰り返しを止めます。（44～50行目）
|
|
74
|
+
+ 「持続時間÷間隔=ステップ数」だけ、不透明度の変更を繰り返し、所定のステップ数に達したら、clearInterval を呼んで繰り返しを止めます。（44～50行目）
|
|
75
75
|
|
|
76
76
|
（setInterval 関数は設定時にintervalIdを返します。clearInterval関数 にその intervalId を指定して呼ぶことで、繰り返しを止めることができます）
|
|
77
77
|
|
|
78
78
|
+ フェードイン/アウト中はボタンを無効化することでフェードイン/アウト処理中にフェードアウト/イン処理が始まってしまうことを防いでいます。（58行目）
|
|
79
79
|
|
|
80
|
-
+ 24行目は、フェードイン/アウト中にウィンドウが閉じられたり別のページに遷移されてしまったときにclearIntervalを呼ぶための処理です。
|
|
80
|
+
+ 24行目は、フェードイン/アウト中にウィンドウが閉じられたり別のページに遷移されてしまったときにclearIntervalを呼ぶための処理です。
|