如何将 Div 随机前后翻转

Question

参考： How to Flip Div's in Randomly and The working fiddle: http://jsfiddle.net/7x75466y/5/

我的网站上有上述随机图像翻转脚本。目前它翻转一个随机图像并让它保持那个状态，然后移动到另一个随机图像并翻转它并让它保持那个状态，等等。

每次翻转后我需要它 "unflip"，然后再转到下一张随机图像。这是我希望它如何工作的示例：https://learnwithhomer.com/buzz/press/

这里是有问题的jQuery：

$(document).ready(function () {
    var $flippers = $(".flip-container"),
    qtFlippers = $flippers.length;

    setInterval(function () {
    $flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover'); }, 2000);
});

Answer 1

var $flippers = $(".flip-container"),
    qtFlippers = $flippers.length;
var isFlipped = false;
var randomItem = -1
setInterval(function () {
    
    if (isFlipped && randomItem !== -1) {
     $flippers.eq(Math.floor(randomItem)).toggleClass('hover');
     isFlipped = false;
      randomItem = -1;
      return;
    }
    
    if (!isFlipped) {
      randomItem = Math.random()*qtFlippers;
     $flippers.eq(Math.floor(randomItem)).toggleClass('hover');
     isFlipped = true;
    }
}, 1000);

section {
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.flip-container {
    position: relative;
    display: inline-block;
    margin-left: 50px;
}

.flip-container > div > div {
    background: red;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.flip-container .flipper {
    transform-origin: 50px 100%;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.vertical.flip-container .flipper {
    transform-origin: 100% 50px;
}

.flip-container > div > div + div {
    background: green;
    transform: rotateX(180deg) scaleX(-1) scaleY(-1);
}
.vertical.flip-container > div > div + div {
    transform: rotateX(180deg);
}


/* flip the pane when hovered 
.flip-container:hover .flipper,*/
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

/*.vertical.flip-container:hover .flipper,*/
.vertical.flip-container.hover .flipper{
    transform: rotateX(180deg);
}

.flip-container,
.flip-container > div > div {
    width: 100px;
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
        
    <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
        
    <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
  <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
   <div>Rushikesh</div>
   <div>Prudvi</div>
  </div>
 </div>
</section>

你看起来像这样吗？

如何将 Div 随机前后翻转

How to Flip Div's Randomly Back then Front Again

javascript

random

jquery

flip