javascript - 使用 JQuery/CSS 在页面上滑动 Div

Question

我使用了以下代码，每次单击 div 时它都会动画并在页面上移动，从而在它之后移动下一个。

http://jsfiddle.net/jtbowden/ykbgT/2/

但是，我正在尝试让它每 3 秒自动滚动一次，而无需单击。我已经尝试使用计时器对 javascript 进行以下调整，但它似乎只是 spazz out 而不是正确滚动:

<script>

    $('.box').click(function () {

        $(this).animate({
            left: '-50%'
        }, 500, function () {
            $(this).css('left', '150%');
            $(this).appendTo('#container');
        });

        $(this).next().animate({
            left: '50%'
        }, 500);
    });

    $(document).ready(function ()
    {

        setInterval(function ()
        {

            $('.box').click();
            console.log("BOX CLICKED.");

        }, 3000);

    });


</script>

有没有人有什么想法？

谢谢

Answer 1

类似于 Zack 的回答(但更简单，恕我直言)，我发现以下内容适合您

id = 1

setInterval(function(){
    $('#box' + id).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

    $('#box' + id).next().animate({
        left: '50%'
    }, 500);

    id = id <= 5 ? id + 1 : 1;
},4000)