もんりぃ is undefined.

育児ネタとか、技術ネタとか。

jQuery.animate() では background-position を扱えない。

っぽいので調べてみた。*1

動かないコード

HTML

<p id="hoge">
  <span>適当なテキスト</span>
</p>

CSS

#hoge {
  width: 100px;
  height: 20px;
  background-image: url('/path/to/image');
  background-position: 0 0;
  background-repeat: no-repeat;
}

#hoge span {
  text-indent: -9999px; /* text-indent の是非に関しては、このエントリの範疇外ってことでw */
}

JavaScript

$('#hoge').animate({backgroundPosition: '-100px 0'}, {duration: 500});

こう書いても、アニメーションはせずに、500ms 後に background-position が変わるだけ。

多分、ブラウザ毎の互換の絡みなのかなぁ?とかは思うけど、何れにしても動かなかった。

勿論、ハッシュのキーを 'background-position' にしてもダメだし、Firefox に限定すれば backgroundPositionX とかしてもダメだった。*2

で、どーしたかと言えば、img タグに切り替えて強引に対処。

動くコード

HTML

<p id="hoge">
  <img src="/path/to/image" />
</p>

CSS

#hoge {
  width: 100px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

#hoge img {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

$('#hoge img').animate({left: '-100'}, {duration: 500});

これで、一応期待していたような動きに見える。

んー、微妙…orz