jQuery에서 재귀 애니메이션이 작동하지 않습니다.

Question

저는 웹 사이트의 헤더에서 여러 이미지를 가로로 스크롤하는 함수를 만들었습니다. 그래서 내 헤더의 내부에서 나는이 비슷한 코드를 가지고 :

1. 는 첫 번째 이미지를 얻을, 애니메이션을 사용하면에 시야 외부에서 스크롤 : 그런 식으로 일을

   <div class='images'> <!-- this div is 150% wide with overflow hidden --> 
       <img src=... /><img src=... /><img src=... /><img src=... /> 
   </div> 
   

   을 생각한다 왼쪽으로 (margin-left 속성 사용)

2. 첫 번째 이미지를 마지막으로 이동합니다 (사실 이미지를 제거하고 끝에 새 이미지를 만듭니다).
3. 전체 프로세스를 다시 시작하십시오. 지금은 방법으로 다음과 같은 작동

   function scroll() 
   { 
       var o = jQuery('.images').children().first(); 
       var w = o.css('width'); 
       var s = o.attr('src'); 
       jQuery('.images:first-child').animate({'margin-left': "-"+w}, {'duration': 1000, 'complete': function(){ 
        jQuery('.images').children().first().remove(); 
        jQuery('.images').append("<img src='"+s+"' />"); 
        scroll();}}); 
   } 
   

   : 나는 기능 다음 만든

첫 번째 영상이 제대로 애니메이션, 모든 다음 이미지가 스크롤되지 않습니다 (애니메이션이 작동하지 않습니다) 1000 ms 후에 첫 번째 이미지가 끝까지 이동합니다. 사실 이미지가 변하고 있지만 애니메이션이 작동하지 않습니다.

마지막에 scroll() 함수가 너무 일찍 호출되지만 올바르게 연결하는 방법을 가정합니까?

Answer 1

그래서 내가 틀리지 않는 경우에 이것은 당신이 원하는 무엇인가 :

JSFiddle

당신이 이미지 itsef을 대상으로 놓친 유일한 차이점.

jQuery('.images img:first-child')