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

У меня есть изображение полого круга. Мне нужно 10 из этих кругов увеличить от ширины и высоты 0px до 1000px ширины и высоты от центра экрана. Анимации должны начинаться с разных интервалов друг с другом, чтобы вы расширяли концентрические круги, а прозрачность изображений должна была измениться на 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>

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

благодаря

1
Мне тоже было бы интересно узнать, есть ли у кого-то версия для CSS3!
добавлено автор Greg Pettit, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda