【问题标题】：Background image position change in jquery animationjquery动画中的背景图像位置变化
【发布时间】：2013-02-10 07:54:12
【问题描述】：

我想更改 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;
}

jQuery

$('#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

提前谢谢你。

【问题讨论】：

我猜，您可能没有在 document.ready 中包含您的脚本。这就是为什么在文档未准备好时调用它的原因。我已经更新了我的代码。它是一个简单的html。它的工作。

标签： jquery html

【解决方案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;

}

这是一个小提琴：http://jsfiddle.net/pavloschris/eg5zC/7/ 和transition 浏览器的可操作性：http://caniuse.com/#search=transition

【讨论】：

我想你忘了点击小提琴中的“更新”，但是你的方法确实有效
jQuery 也可以为背景位置设置动画 - stackoverflow.com/a/5078298/16959，但是 jsfiddle 似乎会干扰演示这一点

【解决方案2】：

对于背景图片位置动画我们需要使用“jquery.backgroundpos.js”你可以从这里下载它http://keith-wood.name/js/jquery.backgroundpos.js

$(document).ready(function(){

$('#pnav a')
.hover(function () {
   $(this).stop().animate({backgroundPosition: '0px ' + '35px'}, 500);
}, function () {
    $(this).stop().animate({backgroundPosition: '0px ' + '0px'}, 500);
});


});

这是更新后的jsFiddle file

【讨论】：

【解决方案3】：

用这个替换你的行，

background:url('http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif') no-repeat ;

在 CSS 中为 URL 添加引号

【讨论】：

你不需要在 CSS 中的 url 周围加上引号

【解决方案4】：

在 animate 函数中，背景位置不是这样工作的。改用这个

$('#pnav a')
.hover(function () {
    $(this).animate({
        'background-position-x': '10%',
        'background-position-y': '20%'
    }, 550);
}, function () {
    $(this).animate({
       'background-position-x': '0%',
       'background-position-y': '0%'
    }, 550);
});

:ref

然而，正如“xpy”所指出的，你想要的可以通过 CSS3.0 实现，但它不会在 IE 上运行

更新：

以下是工作示例：

<html>
    <head>
        <script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script>
         $(document).ready(function(){
          $('#pnav a')
                    .hover(function () {
                        $(this).animate({
                            'background-position-x': '10%',
                            'background-position-y': '20%'
                        }, 550);
                    }, function () {
                        $(this).animate({
                           'background-position-x': '0%',
                           'background-position-y': '0%'
                        }, 550);
                    });
            });
        </script>
       <style>
            #pnav a{
                background:url(http://www.standard-icons.com/stock-icons/standard-road/scooter-icon.gif) 0 0 no-repeat;
                display:block;
                width:20px;
                height:42px;
            }
       </style>

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

Fiddle

【讨论】：

嘿 sonasish，我用你的小提琴本身做了这个，它对我有用。你可能想调整坐标值，否则它很简单吗？？
你能提供你的小提琴文件链接吗？
它在小提琴上工作，因为他们确保 document.ready，但您的原始代码可能没有它。无论如何。一会儿上传小提琴