Question

$( document ).ready(function() {
$('.overlay-1').css({backgroundPosition:'30% 100%'});

var to;

function infinite(){
to = setTimeout(function(){
$('.overlay-1').animate({backgroundPosition:"30% 2000%"},12000,function(){
    $('.overlay-1').css({backgroundPosition:'30% 100%'});
  infinite();
    });    
  });
}
infinite();


});

为什么无法为背景图像设置动画？它意味着一个无休止的滚动背景图像，但没有任何东西在移动？

干杯，萨姆

Answer 1

你需要在你的动画函数中使用单独的背景位置，jquery不能像这样处理多个css参数。例如：

$('.overlay-1').animate({
    'background-position-x': '30%',  
    'background-position-y': '2000%'},12000, function(){});

编辑：刚认为这在FF中不起作用。尝试这个为Firefox： jquery animate background-position firefox

Answer 2

您可以使用CSS3动画。请注意，并非所有浏览器都支持它。您可以在此处查看浏览器采用情况：http://caniuse.com/css-animation。

对于像IE9这样的浏览器，您可以使用静态图片来逐渐降低旧浏览器的用户体验。

我写了一个关于如何使用CSS动画背景位置的小例子，我将谷歌徽标从上到下无限循环作为背景图像：http://jsfiddle.net/xMMct/

在您的情况下，您可以将背景图像定位为无限滚动。

Css代码：

.background {
    background-image: url(https://www.google.nl/images/srpr/logo11w.png);
    width: 200px;
    height: 500px;
    background-size: 200px auto;
    background-repeat: no-repeat;
    background-position: 0% -20%;
    animation:bg 5s linear infinite;
    -webkit-animation:bg 5s linear infinite;
}

@keyframes bg
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

@-webkit-keyframes bg /* Safari and Chrome */
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

这是另一个小提琴，背景似乎无休止地滚动（请原谅每5秒跳一次，值不完美）http://jsfiddle.net/xMMct/1/

修改：更好的示例（没有跳过）http://jsfiddle.net/xMMct/2/

为什么这不能动画？

2 个答案: