jquery动画循环不能正常工作

Question

我有这个循环，动画六个div的问题是动画不起作用，我觉得我的循环有问题

jquery代码：

while (true)
    {

        $(".tabs").children().each(function(index, value) {
           // alert($(value).css("top"));
            if (($(value).css("top") === '0px' && $(value).css("left") === '0px') || ($(value).css("top") === '0px' && $(value).css("left") === '316px'))
            {
                $(value).animate({
                    left: '+=316px'
                }, 1000);
            }
            else if (($(value).css("top") === '296px' && $(value).css("left") === '0px') || ($(value).css("top") === '592px' && $(value).css("left") === '0px'))
            {
                $(value).animate({
                    top: '-=296px'
                }, 1000);
            }
            else if (($(value).css("top") === '592px' && $(value).css("left") === '316px') || ($(value).css("top") === '592px' && $(value).css("left") === '632px'))
            {
                $(value).animate({
                    left: '-=316px'
                }, 1000);
            }
            else if ($(value).css("top") === '0px' && $(value).css("left") === '632px')
            {
                $(value).animate({
                    top: '+=592px'
                }, 1000);
            }
        });
        if ($(".tabs .tab").eq(j).css("top") === '0px' && $(".tabs .tab").eq(j).css("left") === '316px') {
            break;
        }
    }

}

html

<div class="container">
<div class="tabs">
    <div class="tab" id="news">
        <h2>NEWS &<br>EVENTS</h2>
        <div class="tab-content"></div>
        <div class="tab-arrow"></div>
    </div>
    <div class="tab" id="services">
        <h2>PRODUCTS<br>& SERVICES</h2>
        <div class="tab-content"></div>
        <div class="tab-arrow"></div>
    </div>
    <div class="tab" id="partners">
        <h2>PARTNERS</h2>
        <div class="tab-content">

            </div>
        <div class="tab-arrow"></div>
    </div>
    <div class="tab" id="clients">
        <h2>CLIENTS</h2>
        <div class="tab-content"></div>
        <div class="tab-arrow"></div>
    </div>
    <div class="tab" id="search">
        <h2>SEARCH<br>OUR WEB</h2>
        <div class="tab-content"></div>
        <div class="tab-arrow"></div>
    </div>
    <div class="tab" id="findus">
        <h2>FIND US<br>ONLINE</h2>
        <div class="tab-content"></div>
        <div class="tab-arrow"></div>
    </div>
</div>

我希望有人可以帮我解决问题