色はanimate()できない

2010年7月15日

色を animate() しようとしたら。

animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス

数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。

できない仕様だった。何か自分の書き方が悪いのかと、いろいろ悩んでしまった......。

色をアニメーションするプラグイン (Plugins | jQuery Plugins) があって、それを使えばいいっぽい。

そもそも背景色の指定にいまいち慣れないから、いっぱいうろうろするので、ちゃんと調べた。

そのいち

css( "name", "value" )
  • 1つのスタイルしか指定できない。
  • キーと値どちらもダブルコーテーション「"」で囲む。
  • キーと値はカンマ「,」で区切る。
  • 「CSS() 関数の引数として指定している」ということ?

そのに

css({ name: "value" })
  • 複数のスタイルを指定できる (連想配列)。
  • キーは、DOMで通用する書き方の場合のみ、ダブルコーテーションで囲まなくてもよい。
  • 値はダブルコーテーションで囲む。
  • キーと値はコロン「:」で区切る。

ということを踏まえると――

  • OK: $(".hoge").css({ background : "#f00" });
  • OK: $(".hoge").css({ backgroundColor : "#f00" });
  • NG: $(".hoge").css({ background-color : "#f00" });
  • OK: $(".hoge").css({ "background" : "#f00" });
  • OK: $(".hoge").css({ "backgroundColor" : "#f00" });
  • OK: $(".hoge").css({ "background-color" : "#f00" });

こういうことだった。「background」も「backgroundColor」も、DOMで使える書き方。「background-color」はjQuery特有の書き方だから、ダブルコーテーションで囲まないとダメ。

ややこしい。

英語のドキュメント (.css() - jQuery API) には、ちゃんと書いているような気もする (「the CSS and DOM formatting of multiple-word properties」あたり?)。

「キーはいつの日もダブルコーテーションで囲むこと」と決めておけば迷わない?

Category

Archives