showメソッドだけ使えてfadeInメソッドが使えない！　誰か助けて(´;ω;｀)

7344 ワード
fadeIn show jQuery jQuery テキストリンク

jQueryでshowメソッドとfadeInメソッドを使ってみたのですが、
showメソッドは使えて、fadeInメソッドは、使えないという不思議な現象が起こりました(´;ω;｀)
色々調べてみたのですが、解決せずでした、、、。

誰かわかれば教えてください
よろしくお願いします。

上の図のように、クリックしたら、モーダルを表示したいのですが、fadeInは使えません、、、、、。

関係ありそうな部分のコードだけ掲載しておきます。

HTML

  <div class="modal-wrapper" id="login-modal">
       <div id="modal">
        <h1 class="text-center">学習内容</h1>
        <p class="text-center"><a href="">実験器具の使い方</a></p>
        <p class="text-center"><a href="">物質・密度</a></p>
        <p class="text-center"><a href="">状態変化・蒸留</a></p>
        <p class="text-center"><a href="">気体の性質</a></p>
        <p class="text-center"><a href="">水溶液・溶解度</a></p>
        <p class="text-right"><a href="">閉じる</a></p>
       </div>
      </div>

CSS


.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}

  #modal{
    width:50%;
    margin:250px auto 0;
    padding:10px 20px;
    border:2px solid #aaa;
    background:rgb(236, 245, 242);
    border-radius: 32px;
    z-index:2;
  }

  #modal p{
    margin-top:1em;
    font-size:36px;
    border-bottom: solid rgb(155, 159, 149);
  }

  #modal a{
    color:rgb(52, 91, 171);
  }

jQuery


$(function(){

  $('#modal-1').click(function(){
   $('#login-modal').show();
  });

});

ちなみに、以下がfadeInメソッドを使ったときのエラー文です。

何ででしょう、、、(´;ω;｀)