javascript - 当我更改元素的顺序时，元素 "jerk"回到右侧

Question

我正在尝试创建元素的无限滚动，但尚未找到足够轻量级/功能足够的插件，因此我正在尝试创建自己的插件。

到目前为止，它运行顺利，除了当我删除第一个元素并将其附加到父元素的末尾时动画中出现轻微的抖动。我扔掉的例子也有一个问题，由于某种原因，元素失去了填充，但这在我的实际代码中没有发生......

fiddle : 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

如果从 #photos 中删除 padding: 3px，动画将正常工作。