Question

我正在尝试使用变量作为坐标来动画我身体背景图像中的动画，但似乎jquery的backgroundPosition只接受一个值。我尝试了一些东西，比如backgroundPosition：distance1 +“”+ distance2，backgroundPosition：distance1 +“ - 50px”（我希望它在整个时间内的值），但即使我在CSS中设置了最高值，它只是默认使用我的第一个值（左）。任何帮助将不胜感激！

function shiftBoxes(distance1, distance2, id){
    activeBtn('pos' + id.substring(4));
    $("#boxMover").animate({
        marginLeft: distance1
    }, 500, function() {});
    $(document.body).animate({
        backgroundPosition: distance2
    }, 500, function() {});
}
//Add one of these for every box
//The distance to move to the next box is always -1804(*("#pos" + n) - 1) pixels
$("#pos1").click(function() {
    shiftBoxes('0', '-1400', '#box1');
});
$("#pos2").click(function() {
    shiftBoxes('-1804', '-1200', '#box2');
});
$("#pos3").click(function() {
    shiftBoxes('-3608', '-1000', '#box3');
});

Answer 1

我找到了this example。看起来你需要围绕这些值的parens：

.animate({backgroundPosition:"(-20px 94px)"}

Answer 2

属性backgroundPostion将值视为：

左上角右下角中间左侧

或

x％Y％，其中左上角为0％0％，右下角为100％100％

或

xpos ypos，您可以使用任何css单位作为％，像素，em等。

和最后

继承

要使用它，你会有一些像：

.style.backgroundPosition="center bottom";

or

.style.backgroundPosition = "20% 50%";

我希望这会有所帮助。和平。

jQuery backgroundPosition不接受多个值？

2 个答案: