jQuery - remove class from randomly chosen list item, retain ability to re-call on hover

Question

A grid of images is displayed on the page. Hovering over any of these images results in an animated transition between a "front" and "back" image, kind of like a card flipping over. I need to figure out a way to randomly "flip over" one of the images, contained within a list, and cycle through the rest of the list items automatically. The flipped-over image should remain for a period of time (3 seconds) and then return to the other-side, or default state.

I have assembled a demo which accomplishes about 80% of this. So far I have the randomly-selected list item appearing correctly onload, but I need to remove the "flipIt" class after the 3 second interval, after which another card is flipped over. The hover states are functioning fine so far. Have a look »

I've tried adding the following code, but it is not returning the list item to it's original state once one is featured:

this.hide = function(){
    while ($(".thumb").hasClass("flipIt")){
        $(this).find('.thumb-wrapper').removeClass('flipIt');
    };
};

I appreciate any guidance or feedback!

Answer 1

you could try setTimeOut() after your addClass("flipIt")

try this:

this.show = function(){
  ran = getRan(); 
  while (ran == temp){
    ran = getRan();
  }; 
  temp = ran;   
  $("#tips li:nth-child(" + ran + ") .thumb-wrapper").addClass("flipIt");
  setTimeout(function(){
    $("#tips li:nth-child(" + ran + ") .thumb-wrapper").removeClass("flipIt");
  }, 3000);
};