我插入一个loop（）函数后，.animate停止工作

Question

我试图在循环中设置我的动画，但它似乎没有工作，我不知道它有什么不对。目前我的动画只播放一次然后停止，当我加载页面时，如我的gif所示：

的Javascript

 $(function(){

$("#catogories-1").animate({
            'marginLeft' : "+=65px", 'marginTop' : "-=70px"
        });
 $("#catogories-2").animate({
            'marginLeft' : "-=130px", 'marginTop' : "-=30px"
        });   

 $("#catogories-3").animate ({
            'marginLeft' : "-=128px",'marginTop' : "+=30px"
        });   

  $("#catogories-4").animate ({
            'marginLeft' : "+=64px", 'marginTop' : "+=83px"
        });  

 $("#catogories-5").animate ({
            'marginLeft' : "+=100px", 'marginTop' : "-=23px"
        });  

} loop();  );

HTML

                                     

            <div id="catogories-2">

                <img src="images/Rectangle-1-copy.png">

            </div>

            <div id="catogories-3">

                <img src="images/Rectangle-1-copy-2.png">


            </div>

            <div id="catogories-4">

                <img src="images/Rectangle-1-copy-3.png">


            </div>

            <div id="catogories-5">

                <img src="images/Rectangle-1-copy-4.png">

            </div>

CSS

#catogories-1 {
    width: 133px;
    position:fixed;
    left: 50%;
    right: 50%;
    top: 45%;
    z-index: 5;
}

#catogories-2 {
    width: 133px;
    position:fixed;
    left: 55%;
    right: 45%;
    top: 37%;
    z-index: 4;
}

#catogories-3 {
    width: 133px;
    position:fixed;
    left: 45%;
    right: 55%;
    top: 34%;
    z-index: 4;
}



#catogories-4 {
    width: 133px;
    position:fixed;
    left: 35%;
    right: 65%;
    top: 37%;
    z-index: 5;
}

#catogories-5 {
    width: 133px;
    position:fixed;
    left: 40%;
    right: 60%;
    top: 46%;
    z-index: 6;
}