0

要素の背景画像を 25% ずつ増やして循環させる効率的な方法を試していますが、100% になると次の増分で 0% に戻ります。

私はこのようなことができます：

var currentPos = $('.ele1').css('background-position');
var elementPositions = currentPos.split(' ');

var x = Number(elementPositions[0].replace(/[^0-9-]/g, ''));
//var y = Number(elementPositions[1].replace(/[^0-9-]/g, ''));

// only want to do the x axis
x = (x == 100) ? 0 : x += 25;

$('.ele1').css('background-position', x + "%" + " 0");

しかし、要素を2回呼び出さなければならないという事実は好きではありません。jQuery で % をインクリメントし、100% の後に 0% にリセットするより効率的な方法はありますか?

私はCSS .classesでそれを行うことを考えました。しかし、私は自分のスタイル シートにあるものに制限されたくありません。

4

1 に答える 1

3

jQuery のメソッドにコールバック関数を渡すことができます。.css()

$('.ele1').css('background-position', function (i, value) {
    var x = parseInt(value, 10);
    return (x == 100 ? 0 : x + 25) + "%" + " 0";
});

ループ/タイマー/イベントなどからこれを呼び出す場合は、$('.ele1')オブジェクトをキャッシュする必要があります。

于 2013-01-29T19:33:41.980 に答える