JavaScript翻转动画错误

我有一个绝对定位的div网格，每个包含3个图像。这些图像通过类（.z1，.z2和.z3）设置的z-index彼此堆叠在一起。JavaScript翻转动画错误

我选择我的div到一个数组中并随机播放div。

我使用.animate来“翻转”第一个图像并显示第二个。（.z3隐藏）然后我循环这些div并切换类，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>

有网格更多的div这个，但他们都在布局相同。该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()

不幸的是我不能发布一个链接到我的网页，因为它是一个客户端件和专用服务器，但我上将不胜感激任何你可能有的见解。

感谢

来源

2012-12-18 Brad Koehler

通常我尽快解决它，因为我点击提交，

的问题是在我开始功能。

我得到的数组的div每次运行间隔而不是一次循环。

移动window.interval的div选项，修正了问题。

来源

2012-12-18 10:17:03

JavaScript翻转动画错误

回答

相关问题