あかつきのお宿

はいはいはーい！　ノシ



ということで、うっかりjqueryのバージョンを1.8に上げたら、今までanimateで動かしてたbackground-positionが急に動かなくなってしまいました。

以前、jqueryのanimateでbackground-positionを動かそうっていう記事で、まさしく背景のポゼッショニングを華麗にそして流麗に動かす方法を書きましたが、あれはjqueryのバージョンが1.7以下の場合に有効な方法だったようです。1.8にすると残念ながらこの方法では動かなくなる。

なので、上記の記事には実際にアニメーションさせるサンプルをセットで載せといたんですが、それが動かなくなってしまいました……さーせん。

あとでこっそりあのサンプルページで読み込むjqueryを1.7に差し替えとかないとね……そうしないと、あっちの記事だけ読んだ人が「ああん？　動かねーじゃねーか。嘘情報を教えやがって。死をもって償うがいい」って、お怒りになるかもしれないし。

本題の前に……

先に解決方法を書いても良いんですが、ってか本当はそっちの方が良いんですが、とりあえず、どうして動かなくなったのか、その原因を探ってみたいと思います。

と言っても、そんなに難しいことはなくてですね……ようはバージョン1.7の頃にはあった機能が、1.8になってなくなっちゃったから、動かなくなってしまったのですね。

前回の記事で、background-positionを動かすためには『backgroundPosition』っていうプラグインを読み込むと良いよって書いたんですけど、そのプラグインの中には、こんなコードがあるんですね。

$.curCSS(fx.elem,'backgroundPosition');

この『$.curCSS』ってのは要素のCSSの属性値を取るやつでして、プラグインの中ではこれでbackground-positionを取得しているんですけど、どうやらこの子、jquery1.8から戦力外通告を喰らってしまったみたいで、つまり1.8にはこんなメソッドはないんですね。だから動かない。

まあ、なくなってしまったんじゃ、しようがないよね。いくら豚肉の生姜焼きを作りたくても、豚肉がなかったら作りようがない。ただショウガを焼いただけの料理を作るしかない。それと同じことです？

まずは簡単な解決策を提示してみる

前回の記事でも似たようなことを書いたんですけど、X方向かY方向、どちらか一方だけを動かすってことなら、プラグインに頼らなくても大丈夫みたいです。

$(function(){
  $('#div').click(function(){
    $(this).animate({
      backgroundPositionX: '200px',
      backgroundPositionY: '100px',
    });
  });		
});

つまり、background-position-xとbackground-position-yを個別に操作するってことですね。これなら1.8でも動く。

ただしFirefox以外。SafariやChrome、IE9などは大丈夫みたいだけど、Firefoxはこれだと動いてくれないみたい。

となると、やっぱりここは、何かしらのプラグインに頼るなりしないと、ダメってことですね。

新たなプラグインが舞い降りしとき道は開かれる

こんなプラグインがあった。

jQuery Background Position

まあ、名前的にはそのまんまですね。

このページからファイルをダウンロードして、使いたいページでjqueryと一緒に読み込むだけ。

これで今まで通り、前回と同じような書き方でbackground-positionを動かせる。

<script type="text/javascript" src="jquery1.8.js"></script>
<script type="text/javascript" src="jquery.backgroundpos.js"></script>
<script>
$('#div').click(function(){
  $(this).animate({
    backgroundPosition:'200px 100px'
  });
});
</script>

やったね。ひゃっほい。






今回はサンプルはナッシングです。ごめんね。

まあ、使うプラグインさえ入れ替えれば、他は前回と同じ要領で行けるから、そっち見てちょ。ちゃんと動くようにしとくから。

そうやってこっそり地味にPVを稼ごうという魂胆なのさ、ふっふっふ……ふえっくしょん！

昨日も言ったけど、最近寒くなって来てるんで、風邪引かないように気をつけてくださいね。