jQueryのアニメーションでエラー… Uncaught TypeError : $(…).animate is not a function が出た時の解決内容

更新2024/09/23

今回はこちらのJSのエラーについてです。

Uncaught TypeError: $(...).animate is not a function

これは、jQueryを使ってanimateメソッドを使用しようとした時に出たエラーです。いつも使用しているコードを記述していて、今までこのエラーが出たことがなかったので不思議でした。

しかしこの時にいつもと違って変更したことがあります。それはjQueryの.slim.js や .slim.min.js といった jQueryのslim版を使用したことです。

jQuery CDN

使おうとしたjQueryのCDNコードがこちら。

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

jQueryのslim版はajax系の関数といくつかのアニメーション系のメソッドのサポートがされていないそうです。animateメソットだけでなく以下のメソッドを使用した場合もエラーになります。これらはjQueryで使用することも多いと思うので、slim版を使う際には覚えておきたいところです。

  • animate
  • fadeIn
  • fadeOut
  • fadeToggle
  • fadeTo
  • slideDown
  • slideUp
  • slideToggle
  • finish
  • stop

【参照】jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた | Another Sky

CDNコードをslim版ではないものに変えたらエラーは無くなりました。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

実はこの時に初めて jQueryのslimバージョンを使ったのですが、どういう違いがあるのかということをこのエラーで学びました。
またエラーは学びの機会でもあります。嫌なものでもありますが、いろいろ試して知識を増やしていくのもプログラミングには必要なことです。

数をこなす必要がありますが、エラーに慣れてくるとメッセージを読むだけでどこの何が悪いのか分かることも増えていきます。
プログラミングにエラーはつきものです。エラーになった時に表示される内容の意味、そして原因がわかれば対応しやすくなります。

カテゴリー : JavaScript

JavaScript関連の記事

TOPへ