JavaScript プログラミング

【jQueryのよくあるエラー】アニメーションが動かない原因 animate is not a function

2020年11月16日

 

こんにちは、イケゾーです。

先日、jQueryを触っていて、すごく困ったことがありました。

 

jQueryでアニメーションをつけて動かそうとしたのですが、全く動かないんです 😥
コードを公式サイトからコピペしてもだめ、、、

 

コンソールでログを見てみると、次のエラーが表示されていました。このエラーの原因と対策について解説します。

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

 

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

【jQueryのエラー】アニメーションが動かない原因 animate is not a function

エラー「animate is not a function」が出てお困りの方は、下記の順番で解決していきましょう。

 

エラーの原因はslim版にあった

色々調べてみると、jQueryのslim版を使用していることが原因でした。

Progateやドットインストールで、「軽量で良いよ」と書かれていたslim版を当たり前のように使っていましたが、slim版とfull版には性能差があります。slim版では、アニメーション系の関数がサポートされていません。

animate
fadeIn
fadeOut
fadeToggle
fadeTo
finish
stop
slideDown
slideUp
slideToggle
イケゾー
そんな大事なことjQueryの講座で教えてもらってないぞ

 

 

対策はfull版を使おう

slim版ではなく、full版を使いましょう。切り替えは簡単ですね。

CDNの場合は、jquery.min.slim.jsを、jquery.min.jsに変更するだけです。
この際に、最新版を確認しておきましょう。公式サイトはこちら

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-JavaScript, プログラミング
-,

© 2021 IkezoooBlog