Question

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

<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>

想法？

Answer 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

Answer 2

jQuery默认不支持此功能。

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

修改

我错了，它有效：

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

如果你输入地址栏就可以了，但似乎我不能在jsfiddle上做这个工作，很奇怪...... xD

Answer 3

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

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

这不会修复有关event.layer的js控制台错误（它是由浏览器引起的并且不会对网站造成伤害）但它有效;）

Answer 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/

Answer 5

将其包裹在

中

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

jquery.animate background-position不起作用

5 个答案: