Jquery 动画后将元素移动到父元素的开头

我有一个简单的连续5个图像显示在HTML。我为它们设置了动画，使它们慢慢向右移动（同时移动）

当图像到达屏幕的末尾时，我希望将其推回到其父图像的开头（div标记）

在其当前形状中，此动画将最后一个图像推回到第一个图像的位置，并不断交换图像，因为视图空间中始终有一个图像。你能教教教我做错了什么吗

这是我的密码：

HTML

JQuery

$(document).ready(function() {
    function checkPos() {
        $('.sliding-box').children().each(function() {
            if(isOffscreen(this)) {
                $(this).parent().prepend(this);
            }
        });
    }

    setInterval(function() {
        $('.sliding-box').children().animate({left: '+=1'}, 1);
        checkPos();
    }, 1);
});

function isOffscreen(elem) {
    var off = $(elem).offset();
    var t = off.top;
    var l = off.left;
    var h = $(elem).height();
    var w = $(elem).width();
    var docH = $(window).height();
    var docW = $(window).width();

    return !(t > 0 && l > 0 && t + h < docH && l + w < docW);
}

首先，好把戏：）。所以你做的每件事都是对的，除了几件事：

因此，基本上，当

img

元素触及右边界时，即当其

left

等于容器的宽度时，您不会重置其left（现在已增加到容器的右端），因此即使流中的元素，现在位于容器的开头，它有一个非常高的左视图，这就是为什么所有元素都在屏幕外不断向

右侧移动的原因。这样做-

在
checkPos
中，在if条件中只需添加
$（this）.css（'left'，'10px'）

您需要使用间隔

1ms

来摆脱

setInterval

。您可以使用

animate

complete回调来确保动画的重复。如下所示更新代码（我刚刚从

jQuery.ready

中取出函数定义，并将动画逻辑分离到一个单独的函数中，以便能够再次调用：

$(document).ready(function() {animate();});

function checkPos() {

    $('.sliding-box').children().each(function() {

        if(isOffscreen(this)) {
           $(this).parent().prepend(this);
           $(this).css('left',10 +'px');
        }
   });
};  

function animate(){

    $('.sliding-box').children().animate({left: '+=1'}, 1, animate);
    checkPos();
};

function isOffscreen(elem) {

   var off = $(elem).offset();
   var t = off.top;
   var l = off.left;
   var h = $(elem).height();
   var w = $(elem).width();
   var docH = $(window).height();
   var docW = $(window).width();

   return !(t > 0 && l > 0 && t + h < docH && l + w < docW);
}

$（document）.ready（函数（）{animate（）；}）；
函数checkPos（）{
$（'.slidering box'）.children（）.each（function（））{
if（IsofScreen（本））{
$（this.parent（）.prepend（this）；
$（this.css（'left'，10+'px'）；
}
});
};  
函数animate（）{
$（'.slidering box'）.children（）.animate（{left:'+=1'}，1，animate）；
checkPos（）；
};
功能屏幕（elem）{
var off=$（elem.offset（）；
var t=关闭顶部；
var l=关闭。左侧；
var h=$（elem）.height（）；
var w=$（elem）.width（）；
var docH=$（窗口）.height（）；
var docW=$（window.width（）；
返回！（t>0&&l>0&&t+h

看到这个了吗

---

您好，首先，我想为迟来的回复道歉，我已经离开了。我想感谢您的解决方案，但缺少一件事：动画应该尽可能流畅。由于某些原因，现在，当一幅图像结束时，动画会暂时加速，并且多个元素会很快被抛到左侧的s中ide（就像在小提琴中一样，我已经在本地计算机上复制了它）.你知道为什么会发生这种情况吗？提前谢谢你^^。我已经解决了这个问题。正如我最初怀疑的那样，这实际上是一个CSS问题，而不是JS问题，因此摆弄JS并不能使其正确。实际上，图像具有相对定位，因此图像之间的空间始终保持不变。绝对位置我将把我的CSS修改添加到问题中，我已经将你的答案标记为正确答案。再次感谢你，伙计！

$(document).ready(function() {
    function checkPos() {
        $('.sliding-box').children().each(function() {
            if(isOffscreen(this)) {
                $(this).parent().prepend(this);
            }
        });
    }

    setInterval(function() {
        $('.sliding-box').children().animate({left: '+=1'}, 1);
        checkPos();
    }, 1);
});

function isOffscreen(elem) {
    var off = $(elem).offset();
    var t = off.top;
    var l = off.left;
    var h = $(elem).height();
    var w = $(elem).width();
    var docH = $(window).height();
    var docW = $(window).width();

    return !(t > 0 && l > 0 && t + h < docH && l + w < docW);
}

.sliding-box {
    position: absolute;
    left: 10px;
    top: 10px;
}

.sliding-box img {
    position: absolute;
    height: 180px;
}

/* I know that the following is not pretty and can be probably done */
/* in a more elegant manner */

#img1 {

}

#img2 {
    left: 300px;
}

#img3 {
    left: 600px;
}

#img4 {
    left: 946px;
}

#img5 {
    left: 1280px;
}

$(document).ready(function() {animate();});

function checkPos() {

    $('.sliding-box').children().each(function() {

        if(isOffscreen(this)) {
           $(this).parent().prepend(this);
           $(this).css('left',10 +'px');
        }
   });
};  

function animate(){

    $('.sliding-box').children().animate({left: '+=1'}, 1, animate);
    checkPos();
};

function isOffscreen(elem) {

   var off = $(elem).offset();
   var t = off.top;
   var l = off.left;
   var h = $(elem).height();
   var w = $(elem).width();
   var docH = $(window).height();
   var docW = $(window).width();

   return !(t > 0 && l > 0 && t + h < docH && l + w < docW);
}