jQueryアニメーション画像は、画面の中心からの幅と高さを増加させます

私は中空円のイメージを持っています。 0pxの幅と高さから画面の中央から1000pxの幅と高さに拡大するには、これらの円のうち10個が必要です。アニメーションは、互いに異なる間隔で開始する必要がありますので、同心円を拡大し、画像の不透明度を0に変更する必要があります。以下は現在のコードですが、理想的ではありません。私がここで間違っていることは何ですか？

<script type="text/javascript">
    var numNewsCircles = 4;
    var $animationNews;
    $(document).ready(function () {
        $animationNews = $("#animationNews");

        var animationNewsTop = ($(window).height() - 20)/2;
        var animationNewsLeft = ($(window).width() - 20)/2;
        for (var i = 1; i <= numNewsCircles; i++) {
            $animationNews.append($(''));
        }
        animateNews();
    });

    function animateNews() {
        var newLeft = ($(window).width() - 1020)/2;
        var newTop = ($(window).height() - 1020)/2;
        for (var i = 1; i <= numNewsCircles; i++) {
            var delay = 2000 * i;
            $("#newsCircle" + i).delay(delay).animate({ height: 1000 + "px", width: 1000 + 'px', left: newLeft + 'px', top: newTop + 'px' }, 3000, function () {

            });
        }
    }
</script>

これに関する助けは本当に感謝しています。

ありがとう