背景位置 +/- X 像素答案

【问题标题】：Background-position +/- X pixels背景位置 +/- X 像素
【发布时间】：2011-09-21 19:27:30
【问题描述】：

如何将background-position 从其原始位置偏移 20 像素？

点赞：

$(".selector").animate("slow").css("backgroundPosition", "center -=20px");

（这显然行不通......但是我该怎么做呢？？）

【问题讨论】：

【解决方案1】：

jQuery 默认情况下不会为背景设置动画。有这个short code 可以启用它。添加后，您的代码应该可以工作，但首先要像这样修复它：

$(".selector").animate({ "backgroundPosition": "center -=20px" },"slow");

取自：

演示：

【讨论】：

【解决方案2】：

动画 CSS background-position 可与标准 jQuery .animate() 一起使用，如 this example。

<p>Lorem ipsum</p>

p {
    height:50px;
    width:200px;
    background-image:url(http://lorempixum.com/200/50);
}

$('p').animate({'backgroundPosition':'-20px'}, 'slow');

【讨论】：

【解决方案3】：

你想要动画还是改变它？

您可以通过以下方式更改它：

var newPos = parseFloat(($('.selector').css('backgroundPosition').replace('px', ''))+20) + "px";
$('.selector').css('backgroundPosition', newPos);

【讨论】：