fadeInができない

Question

FLOWERの模写中です。FLOWERのサイト

ページ更新時にホーム画面の文字をjQueryを使用してfadeInで表示したいのですが、うまくいきません。（hideは処理できています。）

どなたかどこが間違っているか教えて頂けますでしょうか。ご回答宜しくお願い致します。

html

<div id="home-1" class="header home text-center text-white">
      <div class="logo-1">
        <img id="logo-1" src="img/logo.png" alt="">
      </div>

      <div class="logo-1-text">
        <p>かわいいが届く、ずっと無料*のお花便</p>
      </div>


      <div class="download">

        <div class="md-over">
          <div class="app">
            <a href="https://apps.apple.com/jp/app/id1434272434">
              <div class="btn-a"></div>
            </a>
          </div>

          <div class="google">
            <a href="https://play.google.com/store/apps/details?id=co.rollcake.flower">
              <div class="btn-g"></div>
            </a>
          </div>
        </div>

      </div>

      <div class="note">
        <p>* 配送料360円（税別）が別途かかります</p>
        <p>* 北海道、沖縄、離島エリアは現在対象外です</p>
      </div>

    </div>

jQuery

$(function(){
  $('#home-1').hide();
  $('#home-1').fadeIn();
});

Comments

[hatena19]

hideで非表示になったままで、表示されないということですか。

[ikikiko]

コメントありがとうございます。
はい、そうです。fadeInだけがうまくできません。

Answer 1

Bootstrap を使っていて、slim版のjQueryを使っていませんか？それにはfadeInは入っていません。

【CSS - jQueryでフェードインが効かなくて困っています。｜teratail】
https://teratail.com/questions/195985#reply-290604

【jQueryのuncompressed、minified、slimの違いは？│Dash-Labo】
https://dash-labo.com/difference-of-jquery-version/

【jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた | Another Sky】
https://www.anothersky.pw/2016/06/jquery_3_slimbuild_hint.html

Comments

[ikikiko]

fadeInできました。
ご指摘の通りbootstrapを使っており、slim版のjQueryを使っていたためでした。
ありがとうございました。

Answer 2

fadeInについて現状問題なく動いていると思います。

自分の検証用として共通していただいたコードをcodepenに記載しましたので、自分の動く環境の状態を共有いたします。
（検証なので、共通していただいたコードから、「クリックで動くように」「スピードをslow」に変更はしています。）

https://codepen.io/miwashutaro0611/pen/zYvOJGE