javascript - 无法在正确的时间将元素移动到结束位置

Question

我正在使用 jquery 滑动 div 内左侧的图像以 overflow hidden ，然后删除第一个图像并将其附加到末尾，这样我在列表中始终具有相同数量的图像，并且它们不断向左滑动每次函数触发时:

function xxx(){
    var first = $('.ximg:first');
    $('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});

}
setInterval(function(){ xxx () }, 8000);

<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>

但我最终在容器中只得到了 1 个图像，第二个图像仅在函数触发时添加。我知道有一些已阅读的插件可以做这种事情，但我希望它简单，并且更喜欢尝试编写自己的插件，即使我对 jquery 还比较陌生!

http://jsfiddle.net/rgct2/6/

容器的宽度为 400，并且每个 div 的宽度为 200，因此 View 中应该始终有 2 个 div，即使在动画期间它将显示第一个和第三个 div 的 %。

Answer 1

更好的方法可能是对第一个元素的宽度进行动画处理，因此不需要对所有元素进行动画处理。

function xxx() {
    var origWidth = $('.ximg:first').width();
    $('.ximg:first').animate({
        width: 0
    }, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}

元素也存在 CSS 问题。父元素应该有 white-space: nowrap ，因此元素位于同一行，即使它们不可见。子元素应该有 display:inline-block ，因此它们可以排成一行(即内联)，并且具有可配置的宽度。

另一件事需要注意的是 <div> 之间的空格。 s。您需要确保没有无意的空格，其中包括换行符。

查看更新的演示:http://jsfiddle.net/rgct2/7/ .