jQueryでanimateできない原因は？ $(…).animate is not a functionが出る場合

jQueryでanimate関数を使ってアニメーション動作をしようとしたら、次のようなエラーが出ることがあります。

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

これは、jQueryのslim版を使用しているのが原因かもしれません。

slim版では、ajax系関数が使えないことはよく知られていますが、実は、アニメーション系の次の関数もサポートされていません。

animate
fadeIn
fadeOut
fadeToggle
fadeTo
finish
stop
slideDown
slideUp
slideToggle

slim版を使用している場合は、full版に切り替えましょう。

CDNを使用している場合は、jquery.min.slim.jsの部分をjquery.min.jsと書き換えるだけです。

jQueryは頻繁にバージョンアップしますので、これを機に最新バージョンのものに切り替えても良いかもしれません。

ファイルサイズの差は、jquery 3.0.0では、slim版23.6 kBに対し、full版は30 kBです。25%分サイズが増えますが、あまり気にならない場合が多いと思います。

(なおminは圧縮を意味していますので、機能に違いはありません。)

CDNへのリンク

jquery – cdnjs.com

animateのリファレンスはこちら。

animate(params, [duration], [easing], [callback]) – jQuery日本語リファレンス

stackoverflowでも同様の質問が出ていました。

jquery : $().animate() is not a function – stackoverflow

jQueryの実践テクニックが多く載っている売れ筋の本です。

以上、jQueryでanimateできない原因は？ $(…).animate is not a functionが出る場合でした。