Javascript Can'；t在正确的时间将元素移动到末尾

我使用jquery将图像左滑到div集中以隐藏溢出，然后删除第一个图像并将其附加到末尾，这样列表中的图像数量始终相同，并且每次函数启动时图像都会左滑：

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>

函数xxx（）{
var first=$（'.ximg:first'）；
$（'.ximg'）.animate（{left:'-=200'}，2000，function（）{$（'.ximg'）.css（{left:'0'}）；first.insertAfter（$（'.ximg:last'））；}）；
}
setInterval（函数（）{xxx（）}，8000）；

但容器中只有一个图像，只有在函数启动时才添加第二个图像。我知道有阅读制作的插件可以做这类事情，但我希望它简单，而且我更喜欢尝试编写自己的插件，尽管我对jquery比较陌生

---

容器的宽度为400，每个div的宽度为200，因此视图中应始终有2个div，即使在动画期间，它将显示第一个和第三个div的百分比。

测试其工作，而不是使用移除，使用“分离”

---

已测试及其工作状态，请使用“分离”代替“移除”

---

更好的方法可能是为第一个元素的宽度设置动画，这样就不需要为所有元素设置动画

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

元素也存在CSS问题。父元素应该有

空白：nowrap

，这样即使元素不可见，它们也在同一行中。子元素应该具有

display:inline block

，以便它们可以在一行中（即inline），并且具有可配置的宽度

另一件需要注意的事情是

s之间的空格。您需要确保没有意外的空格，包括换行符

---

请参阅更新的演示：。

更好的方法可能是为第一个元素的宽度设置动画，这样就不需要为所有元素设置动画

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

元素也存在CSS问题。父元素应该有

空白：nowrap

，这样即使元素不可见，它们也在同一行中。子元素应该具有

display:inline block

，以便它们可以在一行中（即inline），并且具有可配置的宽度

另一件需要注意的事情是

s之间的空格。您需要确保没有意外的空格，包括换行符

---

请参阅更新的演示：。

这是因为要删除元素，请删除

remove（）

。谢谢，我刚刚删除了remove（），但它没有解决问题。我怀疑这与将左位置重置为0没有在正确的时间触发有关。这是因为要移除元素，请移除

remove（）

。谢谢，我刚刚移除了remove（），但它没有修复它。我怀疑这与将左位置重置为0没有在正确的时间触发有关。谢谢，我在JSFIDLE上添加了一个示例，并用稍微不同的方法修改了原始代码，但它仍然没有按预期工作。div包装器应该始终显示2个div，即使在设置动画时也是如此，但现在它只显示1个div。谢谢，我在jsfiddle上添加了一个示例，并用稍微不同的方法修改了原始代码，但它仍然没有按预期工作。div包装器应该总是显示2个div，即使在制作动画时也是如此，但现在它只显示1个。太棒了，非常感谢，这正是我想要的。干杯。好吧，我说得太快了。无法减少第一个元素的宽度，因为在实时情况下，此div将包含其他元素，因此它必须向左移动。即使它包含其他元素，减少宽度应该仍然可以，只要CSS设置正确，例如溢出、空白。非常感谢，这正是我要找的。干杯。好吧，我说得太快了。无法减小第一个元素的宽度，因为在实时情况下，此div将包含其他元素，因此它必须向左移动。即使它包含其他元素，只要CSS设置正确，减小宽度应该仍然可以，例如溢出、空白。