はじめに
イベントに従ってボタンの色を変える、
という単純な実装でハマったので、ここに残します。
animate()の簡単な使い方とともに。
animate()とは
DOM上のどんな要素にもstyle属性が指定されています。
animate()関数は、そのstyleをどのように変更したいかを指定することで、
__初期値から指定地まで、styleを徐々に変化させる__ことのできる関数です。
何にハマったのか
リファレンスをよく読めば書いてあったのですが、
animate()は数値型の値をとらない属性（background-colorなど）に対応していませんでした。
ドキュメントはよく読もう（反省）。
どうすればいいのか
animate()でcolor関連のstyleを変更できるようになる、
jQueryのプラグインがありました。 → jQuery Color
(各バージョンのminifiedからCDNが入手できます)
使い方
jQuery(CDN)
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
jQuery Color(CDN)
jQueryColor
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
animate()
animate()
animate(params, [duration], [easing], [callback])
| 引数 | 効果 |
|---|---|
| params | 変化後のstyleを指定 |
| duration | アニメーションの動作期間を指定 ”slow”、”normal”、”fast”、 もしくは完了までの時間をミリ秒単位で指定 |
| easing | 値の変化量を調節する関数を指定 「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」など |
| callback | アニメーション終了時に実行する関数のポインタを指定 |
animate()例
animate()でid=hogeの要素の背景色と文字色を1.5秒で変化させる
$("#hoge").animate(
{
'color': '#FFFFFF',
'backgroundColor': '#e10000'
}, 150
);
「background-color」ではなく、
「backgroundCocor」とキャメルケースで表記しましょう。
paramsとdurationだけ指定した簡単な使い方ですが、
これだけでページに動きが作れます。
その他たくさんの使い方がありますので色々試すと面白いです。