jquery - jquery动画中的背景图片位置变化

Question

我想更改 jquery 动画中的背景图像位置。但是我的代码不起作用。谁能帮我把它短路。

以下是我的代码

CSS

#pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;
}

查询

$('#pnav a')
.hover(function () {
    $(this).stop().animate({
        'background-position' : '(0px -42px)'
    }, 150);
}, function () {
    $(this).stop().animate({
        'background-position' : '(0 0)'
    }, 150);
});

html

<div id="pnav">
<a href="#">123</a>
</div>

这是Fiddle file

提前谢谢你。

Answer 1

我认为 jQuery 动画无法为 background-position 设置动画，但您可以使用 CSS 过渡来代替

    #pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;

    -webkit-transition: background-position 150ms ease-in-out;
    -moz-transition: background-position 150ms ease-in-out;
    -ms-transition: background-position 150ms ease-in-out;
    -o-transition: background-position 150ms ease-in-out;
    transition: background-position 150ms ease-in-out;
}

#pnav a:hover {
    background-position:0px -42px;

}

这是一个 fiddle :http://jsfiddle.net/pavloschris/eg5zC/7/ 和 transition 浏览器兼容性:http://caniuse.com/#search=transition