無限の背景位置のアニメーション - jQuery

Question

私はjQuery上で無限のアニメーションを作成する方法を疑問に思っています "バックグラウンド位置のアニメーション"プラグインで私はsetInterval（）を実装しようとしました。しかしそれはうまくいかなかった、そこにjsfiddle。

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

あなたは誰も私を助けることができる

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

のようなjsのコードを見ることができますか？

ありがとうございます！

Answer 1

アニメーションがアニメーションコールバックの内側にくると、背景の初期位置をリセットする必要があります。

DEMO jsBin with setTimeout

$('#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を使って悪いの問題だった - タブの非アクティブの原因となるアニメーションbuildupsを、私はこの問題があると思いますjQueryバージョン1.6から削除されました。

ここに行く：

DEMO jsBin with setInterval

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

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

Answer 2

か、この使用することができます。

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

Answer 3

を私は答えるで遅れる場合がありますが、私は必要としない機能を行っていますバックグラウンド位置のプラグイン。

var animate = $('#element'); 
function loopbackground() { 
    animate.css('background-position', '0px 0px'); 
    $({position_x: 0, position_y: 0}).animate({position_x: -5000, position_y: -2500}, { 
     duration: 12000, 
     easing: 'linear', 
     step: function() { 
      animate.css('background-position', this.position_x+'px '+this.position_y+'px'); 
     }, 
     complete: function() { 
      loopbackground(); 
     } 
    }); 
} 
loopbackground(); 

ビューここでの作業のデモ：http://jsfiddle.net/kusg5mdg/