I've implemented a feature on my page where squares can be clicked to flip over like a card, revealing their back side.
Take a look at the interactive demonstration on JS Fiddle: http://jsfiddle.net/d1botfu2/
While this works well, I'd also like to have squares automatically flip over every few seconds, similar to a screensaver. After flipping over, they should return to their original position and another random square should undergo the same animation as the click event.
My attempt at using a toggle caused the square to turn white instead of flipping as intended.
$(document).ready(function () {
function change() {
randomElements = jQuery("div.flipper").get().sort(function(){
return Math.round(Math.random())-0.5
}).slice(0,1)
$(randomElements).toggle('active');
console.log("Change");
}
setInterval(function () {
change();
}, 1000);
});