Элементы «jerk» назад вправо, когда я меняю их порядок

Question

Я пытаюсь создать бесконечный прокрутки элементов и не нашел плагин, который был достаточно легким/достаточно способным, поэтому я пытаюсь создать свой собственный ,

Пока он работает плавно, за исключением легкой рывкости в анимации, когда я удаляю первый элемент и добавляю его в конец родителя. Примера я подбросил также вопрос, где элементы теряют отступы, по какой-то причине, но это не происходит в моем фактическом коде ...

скрипка: http://jsfiddle.net/WtFWy/

Использования образец разметки:

<section id="photos" class="bg-transparent-black"> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="green"></div> 
</section>​ 

#photos{ 
    position:absolute; 
    bottom:1em; 
    width:100px; 
    height:225px; 
    padding:3px; 
    overflow:hidden; 
    white-space:nowrap; 
} 
#photos div{ 
    height:100%; 
    width:50px; 
    padding:3px; 
    display:inline-block; 
    position:relative; 
    border:1px solid black; 
} 
.red{background:red;} 
.blue{background:blue;} 
.green{background:green;} 

И JavaScript:

scrollImages = function(){ 
       var photoArea = $('#photos'); 
       var children = photoArea.children(); 
       var firstChild = $(children[0]) 
       var firstOffset=firstChild.offset(); 
       if(document.elementLeft === false){ 
        document.elementLeft = firstOffset.left; 
       } 
       if(document.elementWidth === false){ 
        document.elementWidth=firstChild.outerWidth(true); 
       } 
       if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){ 
        photoArea.append(firstChild); 
        firstChild.css('margin-left', 0 + 'px') 
        children = photoArea.children(); 
        firstChild = $(children[0]) 
        firstOffset=firstChild.offset(); 
        document.elementLeft = firstOffset.left; 
        document.elementWidth=firstChild.outerWidth(true); 
       }else{ 

       } 
       document.elementLeft -= 1; 
       firstChild.css('margin-left', document.elementLeft + 'px'); 
       t = setTimeout(scrollImages, 100); 

      } 
      document.elementLeft = false; 
      document.elementWidth = false; 
      var t = setTimeout(scrollImages, 500); 
      $('#photos').mouseover(function(){clearTimeout(t)}); 
      $('#photos').mouseout(function(){scrollImages()}) 
     }); 

Answer 1

Если удалить padding: 3px из #photos анимации работает должным образом.