jquery.animate 背景位置不起作用答案

【问题标题】：jquery.animate background-position doesn't workjquery.animate 背景位置不起作用
【发布时间】：2011-07-01 23:39:04
【问题描述】：

我正在尝试使用动画创建背景位置更改。
但由于某种原因，它不起作用。

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div class="moveme" style="height:80px;width:240px;background-image:url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');background-repeat:no-repeat"></div>

<script language="javascript">
    $('.moveme').css("background-position","0px 0px").animate({backgroundPosition:"-100px 10px"});
</script>

想法？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

动画 backgroundPosition 从 JQuery 1.5.0 起不起作用。如果你想让它工作，你必须恢复到 1.4.4。显然，它在 1.4.4 中工作的事实是一个巧合，因为“所有动画属性都应该动画到单个数值，除非下面提到；大多数非数字属性不能使用基本的 jQuery 功能进行动画处理。（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置。）" 由于 backgroundPosition 需要两个数值，因此不应支持。

查看此错误单：http://bugs.jquery.com/ticket/8160

还有一个可能的解决方案：http://bugs.jquery.com/ticket/7755#comment:1

【讨论】：

【解决方案2】：

jQuery 1.4 以后的版本不支持具有两个属性的函数。但是您可以改用两个单独的函数 - 一个用于 x 维度，一个用于 y，如下所示：

$('.moveme').css("background-position","0px 0px").animate({'background-position-x': "-100px", 'background-position-y': "10px"});

这不会修复关于 event.layer 的 js 控制台错误（它是由浏览器引起的，不会对网站造成伤害），但它可以工作 ;)

【讨论】：

【解决方案3】：

jQuery 默认不支持这个。

您可以使用类似的插件：http://plugins.jquery.com/project/backgroundPosition-Effect

编辑：

我错了，它有效：

$(function() {
  $('.moveme').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-100px 10px"});
});

如果你在地址栏中输入它就可以工作，但似乎我无法在 jsfiddle 上完成这项工作，奇怪...... xD

【讨论】：

奇怪的是，我可以在 SO 自己的主页上完成这项工作：javascript:jQuery("#hlogo a").animate({"backgroundPosition":"50px 50px"});跨度>
我在 jsfiddle 中尝试过，但它对我不起作用，你能发布一个 jsfiddle 示例吗？
小点；除非您从值中删除“px”，否则这在使用 jQuery 1.7.2 的 FF 13 中不起作用。你也不需要引号中的'backgroundPosition'。我知道旧答案，但这对我有帮助。

【解决方案4】：

我这里使用了背景位置一：www.we-new.com（页脚），但这不是我现在需要的效果。我需要图像向后/向前移动:-(

现在我有这个：

$(document).ready(function() {
var scrollSpeed=70;
var step=1;
var current=0;
var imageWidth=60;
var headerWidth=screen.width;
var headerStyle = document.getElementById('header-content').style;
var restartPosition=-(imageWidth-headerWidth);

function scrollBg(){
current-=step;
if(current==restartPosition){
    current=0;}

$('#ball1').css("background-position",current+"px 0");}
var init = setInterval(scrollBg,scrollSpeed);
});

http://jsfiddle.net/yFKf9/3/

【讨论】：

【解决方案5】：

将其包裹在一个

中

$(document).ready(function() {
     $('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"});
});

【讨论】：