JavaScriptでjQueryを使わずに画像をフェードアウト／フェードインで切り替えたい

以下コードを添削お願いできますでしょうか。
ブラウザで確認するとフェードアウト／フェードインがされず画像が切り替わっている状態です。
デバッガでステップ実行するとフェードアウト／フェードインの動きはしているようなのですが。。。

宜しくお願い致します。

html
1<img id="mainVisual" src="./img/photo1.jpg" alt="photo1">

javascript
1  var mainVisual    = document.getElementById("mainVisual");
2  var imageNum      = 5
3  var count         = 1;
4  var changeOpacity = 1;
5
6  changeImage();
7
8  function changeImage() {
9    fadeOut();
10
11    count++;
12    if (count > imageNum) {
13      count = 1;
14    }
15
16    mainVisual.src = "./img/photo" + count + ".jpg";
17
18    fadeIn();
19
20    setTimeout(changeImage, 3000);
21  }
22
23  function fadeOut() {
24    changeOpacity -= 0.05;
25    mainVisual.style.opacity = changeOpacity;
26
27    if (changeOpacity < 0) {
28      changeOpacity = 0;
29      return;
30    } else {
31      setTimeout(fadeOut(), 50);
32    }
33  }
34
35  function fadeIn() {
36    changeOpacity += 0.05;
37    mainVisual.style.opacity = changeOpacity;
38
39    if (changeOpacity > 1) {
40      changeOpacity = 1
41      return;
42    } else {
43      setTimeout(fadeIn(), 50);
44    }
45  }

行動規範の内容に同意します

回答3件

このように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<img id="fadeImage" src="">
15<script>
16    const fadeImage = document.getElementById("fadeImage");
17    const imageSum = 5;
18    let count = 0;
19
20    document.addEventListener("DOMContentLoaded", function () {
21        fadeImage.src = "https://placehold.jp/150x150.png?text=" + (count + 1) + ".jpeg";
22        fadeOut(fadeImage);
23    });
24
25    function fadeOut(fadeImage) {
26        fadeImage.style.opacity = 1;
27        let fadeOutImage = function () {
28            fadeImage.style.opacity = Math.abs(fadeImage.style.opacity) - 0.01;
29            if (fadeImage.style.opacity > 0) {
30                setTimeout(fadeOutImage, 16);
31            } else {
32                if (count !== (imageSum - 1)) {
33                    count++;
34                } else {
35                    count = 0;
36                }
37                fadeImage.src = "https://placehold.jp/150x150.png?text=" + (count + 1) + ".jpeg";
38                setTimeout(fadeIn(fadeImage), 2000);
39            }
40        };
41        fadeOutImage();
42    }
43
44    function fadeIn(fadeImage) {
45        fadeImage.style.opacity = 0;
46        let fadeInImage = function () {
47            fadeImage.style.opacity = Math.abs(fadeImage.style.opacity) + 0.01;
48            if (fadeImage.style.opacity < 1) {
49                setTimeout(fadeInImage, 16)
50            } else {
51                setTimeout(fadeOut(fadeImage), 2000);
52            }
53        };
54        fadeInImage();
55    }
56</script>
57</body>
58</html>

投稿2017/02/26 09:19

s8_chu

総合スコア14731

切り替えるプロパティがopacity単体であるなら、CSS Transitionを使ったほうが手っ取り早いと思います（MDN）。

css
1#mainVisual{
2  transition-property: opacity;
3  transition-duration: 1s;
4  opacity: 1;
5}
6
7#mainVisual.transparent{
8  opacity: 0;
9}

あとはtransparentクラスを付け外しするだけで、1秒かけてフェードイン・フェードアウトしてくれます。

投稿2017/02/26 07:42

maisumakun

総合スコア145183

okame

2017/02/26 08:04

maisumakun様ご回答ありがとうございます！ ...先に書いておけばよかったのですが、今回は「CSSを使わずに」が前提条件でした。

行動規範の内容に同意します

ベストアンサー

javascript
1setTimeout(fadeOut(), 50);

だと、fadeOut()の実行結果、つまり戻り値がないためundefinedをsetTimeoutの第1引数に渡してしまっています。

javascript
1setTimeout(fadeOut, 50);

に修正するべきかと思います。(fadeInのところも同様)

投稿2017/02/26 06:54

turbgraphics200

総合スコア4267

okame

2017/02/26 07:10

turbgraphics200様回答ありがとうございます！修正したところ画像を配置しているimgタグ内で、style="opacity: 1"の値が若干増減して変化してはいるのですが、見た目ではフェードアウト／フェードインの動きにはなっていないです。他に変更すべき箇所あれば改めてご教示いただければ幸いです。