jQueryでanimateメソッドが反応しない時の対処法

jQueryでanimateメソッドが反応しない!

こういう不具合があったのでここに解決法をメモします。

jQueryでanimateメソッドが反応しなかった理由

結論、コード自体は間違ってませんでした。

今回やりたかったこと

下記のように、要素にマウスオーバーしているときに色を変えるアニメーションをjQueryで実装しようとしていましたが反応しませんでした。

li要素の文字のカラー#000

マウスホバー時にカラー#67aed7に変化させる

↑これをしようとしたけど反応しなかった。

 

コードの書き方が間違ってるのかな?と思いましたが、調べているうちに、

animateで指定できる値は数値のみ。
ということが判明しました。

つまり、animateメソッドはデフォルトだとopacity:0.7;とかの数値は有効でも、color:#67aed7;などの数値以外(文字列)を扱うことはできないということです。

解決法は、jqueryのプラグインを読み込む。これだけでした。

animateメソッドで数値以外を扱えるようになるプラグイン

自分と同じような理由で不具合が起きている人はこれをHTMLのhead内に読み込めば解決です。

※注意点は、jQueryの本体より下、jQueryファイルを読み込んでいるコードより上にプラグインを記述することです。