jQueryでフェードインが効かなくて困っています。

前提・実現したいこと

jQueryでページを読み込んだ時に要素をフェードインさせたいです。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="utf-8" />
5    <!-- サイトのタイトル -->
6    <title>体験＆スポット</title>
7    <!-- cssファイル -->
8    <link rel="stylesheet" href="giftbnbstyle.css" type="text/css"/>
9    <!-- jQuery本体 -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11    <!-- jsファイル -->
12    <script type="text/javascript" src="giftbnb.js"></script>
13    <!-- viewport meta -->
14    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
15    <!-- ファビコン -->
16    <link rel="icon" href="img/bnbfavicon.ico">
17    <!-- bootstrap+jQuery+FontAwesome -->
18    <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
19    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
20    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap-theme.min.css">
21    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
22
23</head>
24<body>
25    <div class="top">
26        <div class="top-screen-container">
27        <div class="top-screen-items">
28            <div class="top-screen-item">
29                <h1 class="text-light"><strong>旅をしよう。</strong></h1>
30                <p class="text-light">世界をぐんと身近に</p>
31            </div>  
32        </div>
33        </div>
34    </div>
35
36    <section>
37
38
39        <div class="three-steps-container text-center">
40        <div class="three-steps row mx-auto">
41            <div class="big-midashi col-md-12 col-sm-12 col-xs-12 fadein">
42                <h1>贈りもの</h1>
43            </div> 
44            <div class="midashi col-md-4 col-sm-12 col-xs-12 fadein">
45                <i class="far fa-envelope fa-3x cyan"></i>
46                <h1>簡単に使える</h1>
47                <p>登録は超かんたん。</p>
48            </div>
49            <div class="midashi col-md-4 col-sm-12 col-xs-12 fadein">
50                <i class="fas fa-stopwatch fa-3x cyan"></i>
51                <h1>有効期限なし</h1>
52                <p>旅をプランできます。</p>
53            </div>
54            <div class="midashi col-md-4 col-sm-12 col-xs-12 fadein">
55                <i class="fas fa-globe-asia fa-3x cyan"></i>
56                <h1>忘れられない旅</h1>
57                <p>ずっと憧れていた街の暮らしも叶います。</p>               
58            </div>
59        </div>
60        </div>
61    
62    <!-- Optional JavaScript -->
63    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
64    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
65    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
66    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
67</body>
68</html>

CSS
1.top-screen-container{
2    margin: 0 auto;
3    height:100%;
4    width:auto;
5    padding-left: 12px;
6    padding-right: 12px;
7}
8
9.top-screen-items{
10    width: 100%;
11    height: 100%;
12    display: table;
13}
14
15.top-screen-item{
16    display:table-cell;
17    vertical-align:middle;
18}
19
20/*fade系*/
21.fadein {
22    opacity: 0;
23    transform : translate(0, 50px);
24    transition : all 1500ms;
25  }
26  
27.fadein.scrollin{
28    opacity: 1;
29    transform: translate(0, 0);
30  }

jQuery
1
2$(function() {
3    $(window).scroll(function (){
4        $('.fadein').each(function(){
5            var elemPos = $(this).offset().top,
6                scroll = $(window).scrollTop(),
7                windowHeight = $(window).height();
8                if (scroll > elemPos - windowHeight + 80){
9                    $(this).addClass('scrollin');
10                }
11            });
12        });
13
14    $('.top-screen-container').hide().fadeIn();
15    
16});

error
1jquery.min.js:2 jQuery.Deferred exception: $(...).hide(...).fadeIn is not a function TypeError: $(...).hide(...).fadeIn is not a function
2    at HTMLDocument.<anonymous> (http://127.0.0.1:5500/giftbnb.js:14:39)
3    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29453)
4    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29755) undefined
5k.Deferred.exceptionHook @ jquery.min.js:2
6jquery.min.js:2 Uncaught TypeError: $(...).hide(...).fadeIn is not a function
7    at HTMLDocument.<anonymous> (giftbnb.js:14)
8    at e (jquery.min.js:2)
9    at t (jquery.min.js:2)
10bootstrap-theme.min.css:1 Failed to load resource: the server responded with a status of 403 ()

試したこと

CSS側でtransitionを設定していないか等、ネットで調べて出てきた解決方法はチェックしました。
jQueryを使うのは初めてなのでどこか初歩的なミスを犯しているかもしれないのですが自己解決できませんでした。

Lhankor_Mhy

2019/06/20 02:54 編集

当方の環境で試したところ、フェードインしましたので、問題が再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/qo1u9nys/ ↑Fiverainyさんの環境で、問題が再現しますか？（わかりやすくするため、時間を大きくしてあります）再現するのであれば、環境の問題だと思います。再現しないのであれば、ご提示いただいていない部分の問題だと思います。

Fiverainy

2019/06/20 04:51

やはりコードは間違っていないようですね。コンソールとやらで表示されたエラーコードを追記しました。

Lhankor_Mhy

2019/06/20 05:03

『コンソールとやらで表示されたエラーコードを追記しました』とのことですが、これは、私が提示したページで発生したエラーですか？

m.ts10806

2019/06/20 05:17

HTMLはDOCTYPE宣言から</html>までなるべく全体ご提示ください。

Fiverainy

2019/06/20 07:19

エラーコードは自分のコードをコンソールで確認したときに表示されたものです。

Fiverainy

2019/06/20 07:22

jQueryの１つめのスクロールのコードは動くのですが、２つめのフェードインだけhideが適用されて非表示になったままになります。

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

回答3件

Bootstrap は確かに slim 版の jQuery を読むように書いていますが、それは Bootstrap が必要としないからです。
https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

slim 版は ajax、アニメーション関連の機能が削除されています。
https://jquery.com/download/#jquery

すでに jQuery は最初のほうで読み込んでいるので削除していいでしょう。

投稿2019/06/20 07:32

x_x

総合スコア13749

ベストアンサー

html
1<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>