무한 배경 위치 애니메이션 - 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/