JavaScript翻转动画错误

Question

我的网格绝对位置为div，每个divs包含3个图像。这些图像通过Z-Index彼此堆叠，该Z索引通过类（.z1，.z2和.z3）设置。

。

我将我的div选择成一个阵列，然后将Div随机散布。

我使用的是"翻转"第一个图像并显示第二张图像。（.z3被隐藏）然后我在这些divs上循环并切换类，z1变为Z3（在底部），Z3移至Z2（现在位于中间），而Z2变为Z1。

这在大多数情况下起作用，但有时似乎是一个随机的问题，其中没有显示DIV中的图像。

除了jQuery slidetoggles，我对任何东西都没有用，所以感谢您的帮助。

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>

网格中有更多的divs，但它们在布局中都是相同的。R1/C1类只是顶部的位置：

：

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

不幸的是，我无法在我的页面上发布链接，因为它是客户端部件和私人服务器，但我感谢您可能拥有的任何见解。

谢谢

Answer 1

通常，我在提交时立即解决了它，

问题在于我的开始功能。

我每次间隔运行时都会得到一系列Divs，而不是一次循环。

将DIV选择移出窗口的侧面。Interval修复了问题。