动画背景未按预期工作

Question

我以前做过这种事情，但现在不适合我......

我有一个容器 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});
})

有什么想法吗？

Answer 1

您的代码几乎是正确的，只需在设置新位置时去掉括号即可：

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

但不幸的是，jQuery 不能原生地为 backgroundPosition 设置动画。

但是有一个很棒的插件可以做到这一点：Background-Position Animation Plugin。

把它放到你的项目中，这样输入的代码就可以开始工作了！