Javascript翻转动画错误

Question

I have a grid of absolutely positioned divs, each containing 3 images. These images are stacked on top of each other with z-index that is set via a class (.z1, .z2 and .z3).

I select my divs into an array and shuffle the div to randomise.

I use .animate to "flip" the first image and show the second one. (.z3 is hidden) then I loop over those divs and switch the classes, z1 becomes z3 (on the bottom), z3 moves to z2 (now in the middle) and z2 becomes z1.

This works for the most part, but occasionally there is a problem seemingly at random where none of the images in a div are displayed.

I'm pretty useless with anything more than jQuery slideToggles so would appreciate some help.

HTML

<div class="grid"> 
     <div class="r1 c1">
         <img src="<?=$grid->image_1_1->getPath()?>" width="149" height="104" class="z1" alt="">
         <img src="<?=$grid->image_1_2->getPath()?>" width="149" height="104" class="z2" alt="">
         <img src="<?=$grid->image_1_3->getPath()?>" width="149" height="104" class="z3" alt="">
     </div>
     <div class="r1 c2">
         <img src="<?=$grid->image_2_1->getPath()?>" width="137" height="104" class="z1" alt="">
         <img src="<?=$grid->image_2_2->getPath()?>" width="137" height="104" class="z2" alt="">
         <img src="<?=$grid->image_2_3->getPath()?>" width="137" height="104" class="z3" alt="">
     </div>

There are more divs in the grid that this but they are all identical in layout. The r1/c1 classes are just the positions for the top: and left:

jQuery

//Find all sub divs in the grid and trigger the flip on them (in order currently)
function begin() {
    var index = 0;

    window.setInterval(function() {
        var divs = $('div.grid div');

        divs.sort(function() { return 0.5 - Math.random();});

        flip(divs[index]);

        if(++index == divs.length)
            index = 0;

    }, 1000);
}
//homepage grid animation
function flip(targetDiv) {

    //Function begins gather variables      
    // All images inside target div are same size

    var currWidth= $(targetDiv).children('img:eq(0)').width();
    var currHeight= $(targetDiv).children('img:eq(0)').height();
    var currMargin = currWidth/2;

    //Remove .z3 - the "bottom" image so that it is not seen during flip
    $('img.z3').width('auto').hide();
    $('img.z2, img.z1').css('margin-left', 0).show();

    // The Animation
    $(targetDiv).children('img.z2').stop().css({width:0,height:''+currHeight+'px',marginLeft:''+currMargin+'px',opacity:'1'});

    $(targetDiv).children('img.z1').stop().animate({width:0,height:''+currHeight+'px',marginLeft:''+currMargin+'px',opacity:'1'},
        {duration:1000});
    $(targetDiv).children('img.z2').stop().animate({width:+currWidth,height:''+currHeight+'px',marginLeft:0,opacity:'1'},
        {duration:1000});

    //Swap classes
    $(targetDiv).children('img').each(function () {
        var $self = $(this);

        if ($self.hasClass('z1')) {
            $self.removeClass('z1').addClass('z3');
            $self.width(currWidth);
        } else if ($self.hasClass('z2')) {
            $self.removeClass('z2').addClass('z1');
        } else if ($self.hasClass('z3')) {
            $self.removeClass('z3').addClass('z2');
        }
    });

    //Trying to combat items with 0px width on second run through
    //$(targetDiv).children('img').width(currWidth);
}

//Trigger Rotation
begin()

Unfortunately I cannot post a link to my page as it is a client piece and on a private server but I would appreciate any insight that you may have.

Thanks

Answer 1

Typically I solved it as soon as I hit submit,

The problem was in my begin function.

I was getting the array of divs everytime the interval ran rather than once and looping through.

Moving the div selection out side of the window.interval fixed the issue.