Question

我正在使用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>

但是我最终只在容器中放了1个图像，第二个只在函数触发时添加。我知道有读取插件可以做这种事情，但我希望它简单，并且更愿意尝试自己编写，甚至认为我对jquery相对较新！

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

容器宽400，并且每个div宽200，在视图中总是应该有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>之间的空间。您需要确保没有无意的空格，包括换行符。

请参阅更新的演示：http://jsfiddle.net/rgct2/7/。

Answer 2

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

function xxx(){

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

无法在正确的时间移动元素

2 个答案: