我想知道如何使jQuery的無限動畫與插件「背景位置動畫」我試圖實現setInterval（）;但它沒有工作，有一個jsfiddle。無限背景位置動畫 - jQuery

你可以看到像

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

js代碼誰能幫助我？

謝謝！

來源

2012-01-12 Ivan

您必須在動畫回調中動畫結束後重置背景初始位置。

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 - 選項卡上的不活動造成的動畫集結，但我認爲這個問題是從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);

來源

2012-01-12 23:06:27

它的工作，但你可以看到它的最終位置剎車，我想使它不可阻擋的動畫，有可能使這種方式？如果不可能，我標記你的答案 – Ivan 2012-01-12 23:20:17

@Ivan我會試一試。我有第一個decypher代碼:) – 2012-01-12 23:25:02

更新：http://jsbin.com/aqotif/3/edit#javascript,html,live我在animate（）實現「線性」;功能它成爲無限的動畫，謝謝！ – Ivan 2012-01-12 23:25:31

，或者您可以使用此：

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

來源

2012-07-31 16:26:28

我可能會遲到回答，但我已經不要求功能背景位置插件。

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/

來源

2015-01-14 17:34:27

無限背景位置動畫 - jQuery

回答

DEMO jsBin with setTimeout

DEMO jsBin with setInterval

相關問題