JQuery .animate for image slider only working after looping through all images once-CodePudding

I am trying to do a simple image animation where it loops through three preset images by reducing the current image to 0x0px and enlarging the next image to 190x288px

The code I have performs this but only after it loops through all the images once. On start, the first image appears then reduces to 0x0px with no other images appearing until it iterates through the loop once. For instance if it starts at image A for images A, B, and C then the asterix denotes where the first image animation occurs correctly (with the exception of the first image reducing to 0x0px correctly)

A - B - C - A - B* with all other images working correctly after.

I current have the following code

animate.js

$(function() {
    setInterval("bigImage()", 5000);
});

function bigImage() {
    var $active = $('#three img:not(.hidden)');
    var $next = $active.next();

    if ($next.length === 0) {
        $next = $('#three img:first');
    }

    $active.animate({
        height: '0px',
        width: '0px'
    }, 1000, 0.0, function() {
        $active.addClass('hidden');
    });

    $next.animate(
        {
        height: '190px',
        width: '288px'
    }, 1000, 0.0, function() {
        $next.removeClass('hidden');
    });

}

index.html

        <div id="img_animation">
            <div , id="three">
                <img src="img/A.jpg" title="A" alt="A" width="288px" height="190px"/>
                <img src="img/B.jpg" title="B" alt="B" width="0px" height="0px" />
                <img src="img/C.jpg" title="C" alt="C" width="0px" height="0px" />
            </div>
        </div>

and style.css for the hidden class

.hidden {
    display: none;
}

CodePudding user response：

The problem is you use animate on elements that are display: none to begin with. Make the css rule .hidden { width: 0px; }