background-positionは通常jQueryのanimateで操作することができません。
プラグインをつかえば動かすことができるようになりますが、今回は自前で実装してみましょう。
方針としてはjQueryのanimateでmodelの値をイージングをかけて変化しつつ、その値をviewのcssプロパティにいれていこうと思います。
DEMO
JavaScript
(function(win, doc, $) { "use strict"; var $x = $(".x"), $y = $(".y"), $xy = $(".xy"), $model = $({x: 0, y: 0}), BG_WIDTH = 114, BG_HEIGHT = 114, INTERVAL = 1000 / 30; move(); setInterval(render, INTERVAL); function move() { $model[0].x = 0; $model[0].y = 0; $model.animate({x: BG_WIDTH, y: BG_HEIGHT}, 1000, move); // 1000msかけて動かす } function render() { $x.css({backgroundPosition: $model[0].x + "px " + 0}); $y.css({backgroundPosition: "0 " + $model[0].y + "px"}); $xy.css({backgroundPosition: $model[0].x + "px " + $model[0]. y + "px"}); } })(this, document, $);
いかがでしょうか。
jQueryイージングと組み合わせるとより良い感じになると思います。
今回は以上です。