はじめに

イベントに従ってボタンの色を変える、
という単純な実装でハマったので、ここに残します。

animate()の簡単な使い方とともに。

animate()とは

DOM上のどんな要素にもstyle属性が指定されています。
animate()関数は、そのstyleをどのように変更したいかを指定することで、
__初期値から指定地まで、styleを徐々に変化させる__ことのできる関数です。

リファレンスをよく読めば書いてあったのですが、
animate()は数値型の値をとらない属性（background-colorなど）に対応していませんでした。
ドキュメントはよく読もう（反省）。

animate()でcolor関連のstyleを変更できるようになる、
jQueryのプラグインがありました。　→　jQuery Color
(各バージョンのminifiedからCDNが入手できます)

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

jQueryColor

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>

animate(params, [duration], [easing], [callback])

引数	効果
params	変化後のstyleを指定
duration	アニメーションの動作期間を指定 ”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定
easing	値の変化量を調節する関数を指定「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」など
callback	アニメーション終了時に実行する関数のポインタを指定

animate()でid=hogeの要素の背景色と文字色を1.5秒で変化させる

$("#hoge").animate(
  {
    'color': '#FFFFFF',
    'backgroundColor': '#e10000'
  }, 150
);

「background-color」ではなく、
「backgroundCocor」とキャメルケースで表記しましょう。

paramsとdurationだけ指定した簡単な使い方ですが、
これだけでページに動きが作れます。
その他たくさんの使い方がありますので色々試すと面白いです。