stop flip effect when mouse hover

Question

Hi Friends I've created a flip effect which is working fine on mouse hover() . I've 12 div's with class .hover and I've also develop a setInterval() function to generates a random number from 1 to 12 to get a eq() of any particular div to flip after every 3 seconds.

Now the problem is I want setInterval function to stop working if I hover any of the div which has class .hover

My jQuery code is below

setInterval(function(){
  if($('.hover').is(':hover') == true)
    {   
     $('.hover').removeClass('flip');
     $(this).addClass('flip');
    }
  else{
    var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */   
    $('.hover').removeClass('flip');
    $('.hover').eq(randomNum).addClass('flip');     
  }         
},200)

Please guys help me out

Thanks in advance .. :)

Answer 1

Try to use clearInterval like,

var clrInt = null;
function fliping(){
   clrInt = setInterval(function(){
      var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */   
      $('.hover').removeClass('flip');
      $('.hover').eq(randomNum).addClass('flip');     
   },200);
}

fliping();   
$(document).on('mouseenter','.hover',function(){
    $('.hover').removeClass('flip');
    $(this).addClass('flip');
    clearInterval(clrInt);
}).on('mouseleave','.hover',function(){ // again flip on mouse leave
    fliping();
});

Answer 2

Try this.

var interval;

function initEffect(){
    interval = setInterval(function(){
                       var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */   
                       $('.hover').removeClass('flip');
                       $('.hover').eq(randomNum).addClass('flip');     
               },200);
}

$('.hover').hover(function(e){
    clearInterval(interval);
    $('.hover').removeClass('flip');
    $(this).addClass('flip');
});

$('.hover').mouseout(function(e){
    initEffect();
});