Jquery 设置背景动画不按预期工作

我以前做过这类事情，但现在对我不起作用了

我有一个容器div和一个内部带有部分透明图像的div。当用户将鼠标悬停在容器div上时，我希望该div上的背景移动0px-56px。我像往常一样尝试过使用动画，但它不起作用。最初我的旧脚本在1.6版中无法运行，所以我回到了1.4.2版，它没有什么区别，所以我的代码可能只是垃圾

$('.trans_bg').css({"background-position":"0 0"});
$('.trans_bg').hover(
function() {
    $(this).animate({backgroundPosition: "(0px -56px)"},{duration:300}); 
},
function(){
    $(this).animate({backgroundPosition: "(0px 0px)"},{duration:300});
})

---

有什么想法吗？

您的代码几乎正确，设置新位置时只需删除括号即可：

$('.trans_bg').css({ backgroundPosition: "0 0" });
$('.trans_bg').hover(function() {
    $(this).animate({ backgroundPosition: "0px -56px"}, 300);
}, function() {
    $(this).animate({ backgroundPosition: "0px 0px"}, 300);
});

但不幸的是，jQuery无法在本地设置背景位置动画

但是有一个很好的插件可以做到这一点：

---

抓取它到您的项目中，这样键入的代码就可以开始工作了

嗨，我拿出了（）和背景移动，但它像标准CSS一样瞬间移动，而不是平滑的动画。我会试试你链接的插件。奇怪的是我以前做过这个-看起来这个插件工作得很好。谢谢你的链接。仍然让我困惑，为什么这次我需要它，但只要它有效！谢谢你的帮助！我真的无法回答为什么你以前不需要它。但当然，如果单独设置每个轴的动画，则可以不使用插件。看，太棒了！这正是我想要的。谢谢：我需要一个快速更新，虽然backgroundPositionX和backgroundPositionY在一些浏览器中工作，但我不想在firefox中工作（至少在mac上，还不确定windows）…所以我最终还是使用了插件代码。不过看起来不错。