我似乎无法正常工作。
$('#product_family_options_dd').animate({
height: '300px',
width: '900px',
backgroundPosition: '-20px 0px',
},
高度和宽度动画但不是背景。
【问题讨论】：
backgroundPosition 应该是background-position 或者background-position-x 和background-position-y 可以设置吗？
标签： jquery jquery-animate background-position
如果你只使用像这样的单独值，则不需要使用背景动画插件：
$('.pop').animate({
'background-position-x': '10%',
'background-position-y': '20%'
}, 10000, 'linear');
【讨论】：
我猜可能是因为它需要一个单一的值？
所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理。 （例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置。）除非另有说明，否则属性值被视为像素数。如果适用，可以指定单位 em 和 %。
【讨论】：
background-position-x 和 background-position-y 指定为单独的值。不要只使用background-position。
由于 jQuery 不支持这个开箱即用，我迄今为止遇到的最佳解决方案是在 jQuery 中定义自己的CSS hooks。本质上，这意味着定义自定义方法来获取和设置 CSS 值，这也适用于 jQuery.animate()。
在 github 上已经有一个非常方便的实现： https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js
有了这个插件，你可以做这样的事情：
$('#demo1').hover(
function() {
$(this).stop().animate({
backgroundPositionX: '100%',
backgroundPositionY: '100%'
});
},
function () {
$(this).stop().animate({
backgroundPositionX: '105%',
backgroundPositionY: '105%'
});
}
);
对我来说，这适用于迄今为止测试的所有浏览器，包括 IE6+。
不久前我确实在网上快速发布了demo，如果您需要进一步的指导，可以将其撕开。
【讨论】：
jQuery 的 animate 函数并非专门用于直接为 DOM 对象的属性设置动画。您还可以补间变量并使用 step 函数来获取补间每个步骤的变量。
例如，要将背景位置从 background-position(0px 0px) 动画化到 background-position(100px 500px)，您可以这样做：
$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
duration: 1000,
step: function() {
var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
$("#your_div").css("background-position", position);
}
});
请确保不要忘记 step 函数中的 this.。
【讨论】：
在您的 jQuery 代码中，在 backgroundPosition 部分后面有一个逗号：
backgroundPosition: '-20px 0px',
但是，当列出要在 .animate() 方法（和类似方法）中更改的各种属性时，大括号之间列出的最后一个参数后面不应有逗号。我不能说这是否就是背景位置没有改变的原因，但这是一个错误，我建议修复它。
更新：在我刚刚完成的有限测试中，输入纯数值（不带“px”）适用于 .animate() 方法中的 backgroundPosition。换句话说，这是可行的：
backgroundPosition: '-20 0'
但是，这不是：
backgroundPosition: '-20px 0'
希望这会有所帮助。
【讨论】：
background-position-x 的第一个值设置动画，如果您尝试使用此方法为background-position-y 属性设置动画，它将不起作用。而且不能同时使用background-position-y和支持火狐...
您也可以使用数学组合“-=”来移动背景
$(this).animate( {backgroundPositionX: "-=20px"} ,500);
【讨论】：
您不能使用简单的 jquery 的 Animate 来执行此操作，因为它涉及 2 个值。
要解决这个问题，只需包含Background Position Plugin，您可以随意为背景设置动画。
【讨论】：
background-position-y 和 background-position-x 在 Firefox 中不受支持。
您可以使用 setInterval 方法更改图像背景位置，请参见此处的演示：http://jquerydemo.com/demo/animate-background-image.aspx
【讨论】：
【讨论】：
我有一个 div My_div 250px x 250px，背景图片也是 250 x 250
css:
#My_div {
background: url("..//img/your_image.jpg") no-repeat;
background-position: 0px 250px;
}
javascript：
$("#My_div").mouseenter(function() {
var x = 250;
(function animBack() {
timer = setTimeout(function() {
if (x-- >= 0) {
$('#My_div').css({'background-position': '0px '+x+'px'});;
animBack();
}
}, 10);
})();
});
$("#My_div").mouseleave(function(){
$('#My_div').css({'background-position': '0px 250px'});
clearTimeout(timer);
});
希望对你有帮助
【讨论】：
使用火狐：
指定两个值：
不适用于任何语法组合——正如上面几个指出的那样。使用 Firebug，我得到“解析 'background-position' 的值时出错。声明已删除。”直到动画结束。
'backgroundPosition': '17.5em' -- 指定 1 个值：
适用于 FF 和 CHrome OPera、SF(Safari) 和 IE，但需要注意的是第二个值或 y 位置（垂直）设置为“中心”。在 Firebug 中，元素的样式设置为：
style="背景位置：17.5em 中心；"
【讨论】：
function getBackgroundPositionX(sel) {
pos = $(sel).css('backgroundPosition').split(' ');
return parseFloat(pos[0].substring(0, pos[0].length-2));
}
这将返回 [x] 值。 数字的长度没有问题。可能是例如9999 或 0。
【讨论】：