っぽいので調べてみた。*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; }