Help us understand the problem. What is going on with this article?

色でハマったanimate()関数の使い方

More than 1 year has passed since last update.

はじめに

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

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away