demo

Question

我正在尝试做一些非常简单的事情：不断循环背景图像。我是通过"Background Position Animations" plugin来完成的。

我目前的代码：

$(function skyloop() {  
  $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});  
});

我需要一种方法在动画结束时调用'skyloop'函数，这会导致它循环，但我似乎找不到这样做的方法。

[编辑] 我已经阅读了所有的回复，我无法弄明白;似乎没什么用。它只是拒绝再次运行。我唯一能想到的是问题是由插件引起的，因为我正在修改背景图像。我会尝试找到另一种方法来连续移动背景图像（顺便说一下，我正试图模拟天空）。

Answer 1

动画有一个回调参数：http://api.jquery.com/animate/

.animate( properties, [ duration ], [ easing ], [ callback ] )

编辑：

在这种情况下你的问题（以及需要回调）是backgroundPosition:(-250 0)，而应该使用相对运算符来保持递减背景位置，如下所示：backgroundPosition: "-=250"。

Answer 2

demo

function skyloop() {  
  $('#header').animate ({"background-position":"-=250"}, 1000, skyloop);  
}

Answer 3

$(function(){
   var skyloop = function(){
      $('#header')
          .animate({backgroundPosition:"(-250 0)" }, { duration: 1000 })
          .queue(skyloop);
   }
});

队列添加了一个在动画结束时触发的函数。

Answer 4

setInterval( "skyloop()", 1001);
function skyloop() {   
  $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});   
};

Answer 5

你可以这样做：

function skyloop() {  
  $('#header').animate({backgroundPosition:"(-250 0)"}, 
                       {duration:1000}, 
                       skyloop);  
}
$(skyloop); //call it on document.ready to kick it off

Answer 6

我认为最简单的方法是查看jQuery Timers： http://plugins.jquery.com/project/timers

例如everyTime（）函数。

Answer 7

您不需要该插件。使用支持.animate的更新的jQuery版本。（1.4.2是最新的）

当前动画完成时，animate方法支持回调函数。

Answer 8

尽管使用.animate方法滚动背景可能会更好看;一旦运行，你可能会开始看到高CPU使用率。根据背景图片，您可能需要查看jquery-randomised-background-scrolling-effect-tutorial。你可以拍一张天空图片并滚动那个insteal

但回到手头的问题处理重新上载的一种方法JS setInterval应该已经完成了。虽然这就是我写它的方式。

setInterval(function(){ $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});} , 1000);

如何循环一个简单的JQuery函数？

8 个答案:

demo