jQuery-animatiefoto vergroten de breedte en hoogte vanaf het midden van het scherm

Ik heb een afbeelding van een holle cirkel. Ik heb 10 van deze kringen nodig om te vergroten van 0px breedte en hoogte tot 1000px breedte en hoogte vanaf het midden van het scherm. De animaties moeten met verschillende intervallen op elkaar worden gestart, zodat je concentrische cirkels kunt uitzetten en de transparantie van de afbeeldingen moet worden gewijzigd in 0. Hieronder staat de code die ik momenteel heb, maar deze is behoorlijk schokkerig en niet ideaal. Is er iets dat ik verkeerd doe hier?

<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>

Alle hulp hierover wordt echt op prijs gesteld.

Bedankt

1
Ik zou ook nieuwsgierig zijn om te zien of iemand een CSS3-transformatieversie heeft!
toegevoegd de auteur Greg Pettit, de bron

Geen antwoorden

0