Question

我试图让背景图像在0％到100％之间前后移动而没有运气。

#swipe {
   position:absolute;
   background-image:url(images/title-back-grade.png);
   background-position:50% 0%;
   height: 250px;
   width: 100%;
   top: 108px;
   left: 0px;
  z-index: 2;
}

<div id="swipe"></div>

$(document).ready(function() {
$('#swipe').css({backgroundPosition:"(50% 0)"});
$('#swipe').animate(
        {backgroundPosition:"(-1% 0)"}, 
        {duration:500});

});

有人可以帮助我吗？

Answer 1

当你说百分比时，它会变成什么样的百分比？更好的方法是计算像素值（如果您不想使用硬编码值）并使用它们。

看看这个tuturial（如果你还没有），可以看一些使用像素值动画背景的好例子：http://snook.ca/archives/javascript/jquery-bg-image-animations

Answer 2

这可以帮助你入门

http://jsfiddle.net/efortis/nTWFt/

function animateBg() {
  var bg = $('#swipe');
  bg.animate({left: '-=5000px' }, 10000, 
   function()  {  
     bg.animate({left: '+=5000px' }, 10000,
       function() {                
         animateBg();
       });
   });
}

$(document).ready(function () {
   animateBg();  
});

动画背景图像

2 个答案: