无限背景位置动画 - jQuery的 [英] Infinite Background Position Animation - jQuery

问题描述

我不知道如何使无限的动画与插件背景位置动画的jquery我试图实现的setInterval（）;但它没有工作，有没有的jsfiddle。

I'm wondering how to make infinite animation on jquery with a plugin "background position animation" i tried to implement setInterval(); but it didn't work, there a jsfiddle.

http://jsfiddle.net/fyuga/2/

您可以看到JS code像

You can see js code like

    $('#tile').css({backgroundPosition:'0px 0px'});
function infinite(){
        $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000);
}
infinite();
setInterval(infinite,12000);

谁能帮我？

谢谢！

推荐答案

您必须重置您的背景初始位置后，动画在动画里面的回调

You have to reset your background initial position after the animation is over inside the animation callback.

$('#tile').css({backgroundPosition:'0px 0px'});

var to;

function infinite(){
 to = setTimeout(function(){
    $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000,function(){
      $('#tile').css({backgroundPosition:'0px 0px'});
      infinite();
    });    
  });
}
infinite();

结果

或你的方式：
但我不得不使用很久以前不好的问题的setInterval - 选项卡上的活动造成动画建隆，但我认为这个问题是从jQuery的1.6版本中删除。

Or your way: but I had time ago bad issues using setInterval - causing animations buildups on tab inactivity, but I think this issue is removed from jQuery version 1.6.

在这里你去：

    $('#tile').css({backgroundPosition:'0px 0px'});
function infinite(){

  $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000,function(){
    $(this).css({backgroundPosition:'0px 0px'});
  });
}
infinite();
setInterval(infinite,12000); 

这篇关于无限背景位置动画 - jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！