Javascriptのanimate()についての記事です。
animate()は数値型の値にしか対応していないことを知らずにハマってしまったので、備忘録として更新します。
##animate()とは
####前提
数値では設定できないCSSプロパティに関しては指定できない！！！
####書き方
main.js
対象要素.animate( {CSSプロパティ: 値}, duration, easing, 関数 )
######第一引数
CSSプロパティはキャメルケースで記述。
（例）font-size → fontSize
######第二引数（省略可）
durationは、ミリ秒で指定する。アニメーションが完了するまでの時間を設定できる。
######第三引数（省略可）
easing」は、アニメーションの挙動を指定することができる。
「linear」と「swing」の2種類を文字列で設定する。
######第四引数（省略可）
callback関数は、アニメーション終了時に実行する関数のポインタを渡すことができる。
##background-colorにアニメーションをつけるには
jQuery UIというjQuery公式のUI用のプラグインを使用。
導入方法は以下の通り。
index.html
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
このプラグインを使用することで、background-colorプロパティにアニメーションをつけることができる。（backgroundColorとキャメルケースにするのを忘れないように・・・）