jQueryのフェードイン

jQueryを使って、最初の画面にロゴのフェードダウンを実装を前回で完成したのですが、１枚目のロゴのフェードアウト時に２枚目のロゴをフェードインしたいのですが、実装できませんでした。

参考になるサイト等も探してみたのですが、ありませんでした。
どのコードに誤りがあり、改善すれば良いのか教えてください。

jQuery
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8</head>
9<body>
10	<center>
11		<div class="start"><p><img src="#" alt="ロゴ画像" class="img_logo" width="100%" height="100%"></p></div>
12		<div class="start"><p><img src="#" alt="ロゴ画像2" class="img_start" width="100%" height="100%"></p></div>
13	</center>
14
15<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
16<script>
17    $(function() {
18	setTimeout(function(){
19		$('.start p').fadeIn(1600);
20	},500); //0.5秒後にロゴをフェードイン!
21	setTimeout(function(){
22		$('.start').fadeOut(500);
23	},2500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！
24});
25</script>
26        <style type="text/css">
27            .start {
28			background: #FFF;
29			position: fixed;
30			top: 0;
31			left: 0;
32			height: 100%;
33			width: 100%;
34			z-index: 9000;
35		}
36
37		.start p {
38			position: fixed;
39			left: 50%;
40			top: 50%;
41			transform: translate(-50%, -50%);
42			display: none;
43			z-index: 9999;
44			width: 280px;
45		}
46        </style>
47</body>
48</html>

terotero

2019/09/02 12:58

フェードダウンは誤字でフェードインのことでしょうか？動きとして1枚目がフェードアウト中に2枚目をフェードインさせたいということで合ってますか？

退会済みユーザー

2019/09/02 13:00

ややこしくて、すいません。おっしゃる通り、フェードインで間違いありません。紙芝居の様に、１枚目が表示されて、消えた後に２枚目が表示する様なものを作りたいです。

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

回答1件

ベストアンサー

現在のコードだと以下のセレクタで「ロゴ画像」と「ロゴ画像2」の要素をどちらも指定している為、どちらにもfadeInとfadeOutが行われます。

Jquery
1$('.start p') // FadeInの時のセレクタ
2$('.start') // FadeOutの時のセレクタ

なので、順番に1要素ずつFadeInとFadeOutを行うようにする必要があります。
以下、順番に行うソースを書いたので参考にしてください。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <center>
            <div class="start"><p><img src="#" alt="ロゴ画像" class="img_logo" width="100%" height="100%"></p></div>
            <div class="start"><p><img src="#" alt="ロゴ画像2" class="img_start" width="100%" height="100%"></p></div>
        </center>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(function() {
                // 先頭の要素にFadeInを設定する
                targetFadeIn($('.start:first'));
            });

            // 指定された要素をFadeInさせる
            function targetFadeIn(target) {
                setTimeout(function(){
                    target.fadeIn(1600);
                    targetFadeOut(target); // FadeInが行われた後にFadeOutを設定する
                },500);
            }

            // 指定された要素をFadeOutさせる
            function targetFadeOut(target) {
                setTimeout(function(){
                    target.fadeOut(500);

                    var nextTarget = target.next('div'); // 次の要素を取得する
                    if (nextTarget.length !== 0) {
                        // 次の要素があったらFadeInを設定する
                        targetFadeIn(nextTarget);
                    } 
                },2500);
            }

        </script>
        <style type="text/css">
            .start {
            background: #FFF;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 9000;
            display: none;
        }

        .start p {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: 280px;
        }
        </style>
    </body>
</html>

投稿2019/09/02 13:58

terotero

総合スコア72