JavaScript プログラミング

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

こんにちは、イケゾーです。
先日、jQueryを触っていて、すごく困ったことがありました。

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

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

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

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定2級保有
  • Twitterフォロワー3,100人
   

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

【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に変更するだけです。
この際に、最新版を確認しておきましょう。
>>公式サイトはこちら

まとめ

エラー「animate is not a function」の解決方法を解説しました。

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

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定2級保有。

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