Reference: How to Flip Div's in Randomly and The working fiddle: http://jsfiddle.net/7x75466y/5/
I have the above random image flipping script working on my site. Currently it flips a random image and lets it stay in that state, then moves on to another randome image and flips it and leaves it in that state, etc.
What I need it to "unflip" after each flip before moving on to the next random image. Here is an example of how I want it to work: https://learnwithhomer.com/buzz/press/
Here is the jQuery in question:
$(document).ready(function () {
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover'); }, 2000);
});
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>
Is it like this your looking?