dDtea Databank 911 | MAYA, Aftereffects, Final Cut Pro,Photoshop, Illustrator, Flashなど私的FAQ虎の巻

■得た知識をネット環境があればどこからでも見れるように個人的備忘録BLOG
■超絶テクでも,くだらんもんでもなんでも自分の為に貯めていく方針
■基本的にテクニック、ショートカット、フィルターのレシピなどなど
■守備範囲はMAYA, Aftereffects, Final Cut Pro,Photoshop, Illustrator, Flashなどなど
★ここに書いてあることを実行して不具合やトラブルが発生しても一切責任負いかねます
<< 【CSS】<li>の高さ height を 100% にしてるのに 0 のままで望む高さにならない | main | 【MAYA】ポリゴンを一つ一つバラバラに分解する 〜 Extract × Separate >>

【jQuery】background-position を指定したいがエラーが出て指定できない

普通jQueryでCSSを操作するには
$("セレクタ").css("CSSプロパティ名","CSSプロパティ値");

この場合は一つしか指定できません。複数指定したい場合は、
$("セレクタ").css({
    CSSプロパティ名: "CSSプロパティ値",
    CSSプロパティ名: "CSSプロパティ値",
    (中略)
    CSSプロパティ名: "CSSプロパティ値"
});

ですよね?

さて、
CSSのプロパティ「background-position」をjQueryで操作したい。

例えば、
#keyvisual の背景の座標を(img_x, img_y)としたいとします。
var p = img_x + "px " + img_y + "px";
$("#keyvisual").css("background-position", p);

これは問題なく動きます。
問題は複数行指定の場合です、
自分はいつでも書き足せるように1行指定でも常に複数行指定の書式で書いています。
var p = img_x + "px " + img_y + "px";
$("#keyvisual").css({
    background-position: p
});

これで動くはずですが、何故かエラーが出ます。
以下Firebugのエラーメッセージ
(X)SyntaxError: missing : after property id
background-position: p,
----------↑

意味が分かりません。
調べても解決できなかった。
background-position

ではなく
backgroundPosition

と記述しないといけない記事をネット上で見つけて試してみたんですが、今度はエラーは出なくなったけど動作は全くしない。
そこで試しにダブルクォーテーションで括ってみようかと思いました。
var p = img_x + "px " + img_y + "px";
$("#keyvisual").css({
    "background-position": p
});

そしたらバッチリ動作しました!
全く理不尽です。まさかこれで解決するとは!

background-position のままだとどうやら変数「background」変数「position」の"引き算"として認識されてしまうようです。

ほんとふざけてますね、
って、これのでおかげで多くのプログラム言語が変数にハイフンが使えない理由が分かった気がします。

ちなみに background-position-x や background-position-y は動作しませんでした、何故か。
| jQuery | 01:58 | comments(0) | - |
スポンサード リンク
コメント
コメントする









CATEGORIES
PROFILE
つくった曲
LINKS
RECENT COMMENT
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    chome (02/05)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ねこ丸 (01/08)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    イワキ (12/25)
  • 【MAYA】Surface ShaderのOut Transparencyにマップを貼っても抜けない
    Shirobi (08/24)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    たけ (08/06)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    nobana (07/26)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ももちん (07/22)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    nanasi (07/06)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ゆちん (06/15)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    いぬっころ (01/17)
RECOMMEND
カラー図解!AUTODESK MAYAビジュアルリファレンス
カラー図解!AUTODESK MAYAビジュアルリファレンス (JUGEMレビュー »)

最近のMAYA本は日本語インターフェースで嫌悪感に付きまとわれる。古くからのMAYAユーザーにとって座右の書となる謳い文句どおり最強のリファレンス
個人的にはダイナミクス部分をもっと細かく取り扱ってほしかったが良い本です
RECOMMEND
Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)
Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS) (JUGEMレビュー »)
Andy Clarke
内容・構成共にセンスの良い本。初心者向きではないが一段上のテクニック・知識を得るにはすばらしい本。日本の著者が書かないなかなか尖がった内容で楽しめます。超おすすめ!
RECOMMEND
「残業ゼロ」の仕事力
「残業ゼロ」の仕事力 (JUGEMレビュー »)
吉越 浩一郎
クリエイティブ業界全員読むべき
・ヘタレなクライアントにも読んでほしい
・朝遅く出社して夜中タクシーで帰る業界面した奴よ読みなさい
RECOMMEND
レバレッジ勉強法
レバレッジ勉強法 (JUGEMレビュー »)
本田直之
クリエイティブワークにビジネス書籍が無縁と思ってはいけない
最先端の技術を使って創作活動する私たちは常に勉強する必要がある
そして年収アップを考えるのであれば周りより努力しないといけない
その努力を如何に効率よく効果をあげるかが学べるオススメ本
RECOMMEND
ノンデザイナーズ・デザインブック Second Edition
ノンデザイナーズ・デザインブック Second Edition (JUGEMレビュー »)
ロビン・ウィリアムズ
これは改訂版で見たこと無いが改定前の青い本はなかなかの良書
主にタイポグラフィーではあるがデザインの原則が学べる超おススメ本
眠くなるががんばってここにある4つの原則を読んでほしい。体得するとプロかアマか位の差が出るね!
映像屋とか3D野郎とかの人、俺には役たたないと思わず読みなさい!映像にも応用ができます。
RECOMMEND
配色アイデア見本帳 (MdN design basics)
配色アイデア見本帳 (MdN design basics) (JUGEMレビュー »)
石田 恭嗣
サンプルが多く、眺めているだけでも楽しく、配色のインスピレーションが降臨する
RECOMMEND
7日間でマスターする配色基礎講座 (Design beginner series)
7日間でマスターする配色基礎講座 (Design beginner series) (JUGEMレビュー »)

色使いはセンスと思いきや!?
配色を勉強すれば問題ありません
センスある日とは無意識にこのルールに従っているだけなのです
配色の理論をわかりやすく学べる良書
RECOMMEND
 (JUGEMレビュー »)

映像のマンスリーDVDマガジン
世界最先端のモーション・エフェクツを使用した企業CM からショートフィルムを多数収録
RECOMMEND
 (JUGEMレビュー »)

Photoshopの操作技術本ではなく
純粋にPhotoshopを道具として如何に写真をよりよく見せるよう加工する?
なかなか興味深く、実用的で硬派な本です
RECOMMEND
BRYCE World Studio
BRYCE World Studio (JUGEMレビュー »)
大沢 ツトム, 大河原 浩一
古いバージョンはフリーで使える景観作成アプリ。解説本は良さげなのはこれくらいしかない。説明書がわりに一冊どうぞ!
Twitter
ARCHIVES
SELECTED ENTRIES
モバイル
qrcode