鼠标悬停时停止翻转效果

stop flip effect when mouse hover

本文关键字：翻转 悬停 鼠标      更新时间：2023-09-26

我已经创建了一个翻转效果，它在鼠标hover()上工作得很好。我有.hover类的12个div，我还开发了一个setInterval()函数来生成从1到12的随机数，以获得任何特定div的eq()，每3秒后翻转一次。

现在的问题是，我希望setInterval函数停止工作，如果我悬停任何div类.hover

我的jQuery代码在

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)

请大家帮帮我吧

提前感谢…:)

试试这个

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();
});

尝试使用clearInterval，

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();
});
相关文章：