背景位置+/- X像素

Question

如何从原始位置偏移background-position，比如20px？

像：

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

（这显然不起作用......但我该怎么做？）

Answer 1

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

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

取自：

http://snook.ca/archives/javascript/jquery-bg-image-animations

演示：

http://snook.ca/technical/jquery-bg/

Answer 2

动画CSS background-position适用于标准jQuery .animate()，与this example一样。

HTML

<p>Lorem ipsum</p>

CSS

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

的JavaScript

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

Answer 3

您想要为其制作动画或只是更改它吗？

您可以通过执行以下操作来更改它：

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