Javascript 如何让Jquery循环工作

这是直截了当的，我不知道如何让它自动循环

                <center><table id = "match_01">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Angelsim</span></td>
                        <td><img src = "https://a.ppy.sh/1777162_1453811024.png" width = "50"></td>
                        <td>#25</td>
                        <td>290 / 270</td>
                        <td>99.92%</td>
                    </tr>
                </table></center>

               <img src = "images/left_ar.png" id = "left_arrow" style = "left: 30%;position: absolute;"> <img src = "images/right_ar.png" style = "position:absolute;right: 30%;" id = "right_arrow"><h1>VS</h1>

                <center><table id = "match_001">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">_index</span></td>
                        <td><img src = "https://a.ppy.sh/652457_1449676530.png" width = "50"></td>
                        <td>#13</td>
                        <td>190 / 136</td>
                        <td>98.89%</td>
                    </tr>

                </table>






                    <!-- Second Player -->   
                <center><table id = "match_02">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Cookiezi</span></td>
                        <td><img src = "https://a.ppy.sh/124493_1448724778.jpg" width = "50"></td>
                        <td>#1</td>
                        <td>290 / 270</td>
                        <td>99.92%</td>
                    </tr>
                </table></center>


               <div class = "invisble">  
               <img src = "images/left_ar.png" id = "left_arrow" style = "left: 30%;position: absolute;"> <img src = "images/right_ar.png" style = "position:absolute;right: 30%;" id = "right_arrow"><h1>VS</h1>
                </div>   


                <center><table id = "match_002">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Reimu-Desu</span></td>
                        <td><img src = "https://a.ppy.sh/948713_1453376392.png" width = "50"></td>
                        <td>#13</td>
                        <td>190 / 136</td>
                        <td>98.89%</td>
                    </tr>

                </table>
                    <div><b>Map:&nbsp;&nbsp;&nbsp;</b><span style="color:#29b;">Everything Will Freeze [Time Freeze]</span></header><br><br>
                    <button>Spectate</button></center>

名称
阿凡达
等级
胜负
精确
安杰尔西姆
#25
290/270
99.92%
VS
名称
阿凡达
等级
胜负
精确
_索引
#13
190/136
98.89%
名称
阿凡达
等级
胜负
精确
库基齐
#1
290/270
99.92%
VS
名称
阿凡达
等级
胜负
精确
灵木德苏
#13
190/136
98.89%
地图：一切都将冻结[时间冻结]


凝视

这就是HTML。请参阅此处的其余代码

基本上它只玩一次循环。。我怎样才能使它无限。 我不确定为什么JSFIDLE显示为奇数，但这里是使用1个iTrance的工作方式

---

确实需要解决这个问题。

创建无限循环（即

而（true）{}

）是个坏主意，因为这可能会冻结/崩溃浏览器，就像choz说的那样。一个想法是将代码包装在

window.setInterval（function（）{}，）中。函数中的代码将每隔
毫秒运行一次（1秒=1000毫秒）

请参阅。
我不打算写所有的代码，只是列出简单的基础知识

将所有动画包装到一个函数中。无论哪一个动画在最后，使用它的完成回调函数再次调用该函数

function page_animations(){
    $("#match_01").delay(2000).animate({left: '-1200px'});
     $("#match_001").delay(2000).animate({left: '-1200px'});


     ....
     // longest aniimation
     $(selector).delay().animate({/* properties*/}, duration, function(){
           // is now complete ... call function to start over
           page_animations();
     });
}

在页面加载时调用函数以开始循环

$(function(){
   page_animations();
});

在重新开始之前，您需要对所有重置进行一些计算
这是个糟糕的主意。您可能会使浏览器处于响应状态，并要求用户禁用此网站的javascript。@choz这不是我永远保留的内容，只是为了体验。@choz“无限”和“循环”不一定意味着您所指的内容。OP只是想循环动画，明白了。我觉得有点不对劲。没有全神贯注，你能发布你的代码吗？它应该看起来像。
$(function(){
   page_animations();
});