jQueryのanimate()を使ってbackgroundColorやcolorを変更しようとしてもできないという事態が起こると思います。
というわけでその理由と対策をサクッと見てしまいましょう。
animate()は数値型のみに対応
そもそもjQueryのanimate()は数値型のアニメーションしか対応していません。
例えばfontSizeやwidthなどは20pxや100%といったように数値で指定します。animate()でアニメーションができるのはこういった値のみです。
なのでbackgroundColorやcolorのように#fffとかredみたいに書いてもアニメーションができないわけです。
公式リファレンスにもanimate()でbackgroundColorなどはアニメーションできないと書いてありますね。
most properties that are non-numeric cannot be animated using basic jQuery functionality (For example,
width,height, orleftcan be animated butbackground-colorcannot be, unless the jQuery.Color plugin is used).
英語なのでわかりづらいですが、まとめると
「width、height、leftなどの数値型のプロパティは機能しますが、backgroundColorなどの数値型ではないプロパティはjQuery.Colorなどのプラグインを使わないと機能しません」
みたいな感じです。
対処法1：jQuery UIを使う
jQuery UIというユーザーインターフェス（プラグインの集合体みたいな感じの機能）を読み込むことでbackgroundColorなどもアニメーションできるようになります。
CDNで読み込む
jQuery UIはCDNで読み込むことができます。
Googleからソースをコピペするだけです。
以下がそのコードです。これを<head>内にコピペするだけでbackgroundColorなどが動くようになります。
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
一番簡単で読み込みも早いのでこれがオススメですね。
ダウンロードする
もう一つの方法として公式jQuery UIのサイトからダウンロードするという方法があります。
ダウンロードするメリットは、ネットに繋がっていなくても利用できる点です（jQuery本体もCDNではなくダウンロードしてある必要があります）
以下が公式サイトです。一番下の「Download」をクリックするとダウンロードできます。
必要な機能だけに絞ってダウンロードもできるみたいですが、よくわからない場合はそのままダウンロードすればオーケーです。
対処法2：プラグインを使う
先ほどチラッと紹介した通り、jQuery-colorといプラグインを使ってbackgroundColorなどをアニメーションさせる方法もあります。
このプラグインの使い方に関しては以下のサイトがわかりやすかったので参考にしてみてください↓
jQueryの基本は以下の本がとても参考になりました。細かく解説されているので初心者にもおすすめです。
まとめ
jQueryのanimate()でbackgroundColorやcolorがアニメーションしない理由は、animate()が数値型しか対応していないからということでした。
理由がわかるとなんてことないですが、最初は結構つまづきがちです。僕も最初はbackgroundColorがアニメーションしなくて悩んでいました。
対処はとても簡単なので、サクッと解決してしまいましょう。
以下のコードを<head>内にコピペ！
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
