Question

嗨朋友我已经创建了一个在鼠标hover()上正常工作的翻转效果。我和班级.hover共有12个div并且我还开发了setInterval()函数来生成1到12之间的随机数以获得eq()任何特定的div每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)

请大家帮帮我

提前致谢.. :)）

Answer 1

尝试使用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();
});

Answer 2

试试这个。

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

鼠标悬停时停止翻转效果

2 个答案: