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。

将其抓取到您的项目中，以便键入的代码才能开始工作！

动画背景无法按预期工作

1 个答案: