Frontend

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が出る場合でした。

Chart.jsのパイチャートがスマホ画面で潰れてしまうのを防ぐ方法!

Chart.jsはレスポンシブ対応のjavascriptチャートライブラリです。

レスポンシブ対応を謳っていますが、パイチャート/ドーナッツチャートをスマホなどの幅の狭い画面で表示させると、パイが縮小されすぎて見づらくなってしまいます。

それを防ぐ方法を紹介します。

続きを読む

Chart.jsで、ラベルやデータ値を常に表示する方法。パイチャートで便利!

Chart.jsはレスポンシブ対応のJavascriptチャートライブラリです。

Chart.jsにおいては、グラフのデータ値はデフォルト設定では常に表示されず、マウスポインタをグラフ点に近づけたときにツールチップ表示されるようになっています。

そこで、データ値を常に表示するデータラベルを付ける方法を紹介します。

また、パイチャート等では、パイ中にラベルを表示した方がグラフが見やすくなります。応用例として、データ点付近にラベルを表示する方法も紹介します。

続きを読む