jQuery анимированное изображение увеличивает ширину и высоту от центра экрана

Question

У меня есть изображение полого круга. Мне нужно 10 из этих кругов, чтобы увеличить ширину и высоту 0px до ширины и высоты 1000px от центра экрана. Анимации должны запускаться с разными интервалами друг к другу, поэтому вы получаете расширяющиеся концентрические круги и непрозрачность изображений должна измениться на 0. Ниже приведен код, который у меня есть в настоящее время, однако он довольно резкий и не идеальный. Здесь я что-то не так делаю?

<style type="text/css">
    body{background-color:black;padding:0px;margin:0px;height:100%;width:100%;position:relative;}
    .newsCircle{position:absolute;padding:10px;}
    #animationNews{width:100%;height:100%;}
</style>
<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($('<img class="newsCircle" style="width:0px;height:0px;top:' + animationNewsTop + 'px;left:' + animationNewsLeft + 'px" id="newsCircle' + i + '" src="images/animations/news.gif" />'));
        }
        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>

Любая помощь в этом действительно приветствуется.

Спасибо