仅当我在1秒后悬停在li上时显示弹出窗口

Question

我试图在li上悬停显示内部div。我正在做fadeIn和fadeOut的效果，但问题是当我快速悬停在所有li fadeIn效果工作的所有。只有当我在1秒内悬停在里面时才显示，如果我在1秒之前离开那个元素，它不应该显示淡入淡出效果。

<script type="text/javascript"> 
    $(document).ready(function(){ 

     var _changeInterval = null; 
     $(".badge_icon").hover(function() { 
      clearInterval(_changeInterval) 

      _changeInterval = setInterval(function() { 
       $(this).find(".badges_hover_state").fadeIn(500); 
      }, 1000); 

     },function() { 

      $(this).find('.badges_hover_state').fadeOut(500); 

     }); 
     }); 
</script> 

我试过使用stop（），delay（）也没有得到成功。最后我试着去处理时间间隔，但现在我的代码已停止工作。

Answer 1

之所以能够在变量名前加窗来解决这个问题。

var myTimeout; 

    $('.div').mouseenter(function() { 
     window.el = $(this); 
     myTimeout = setTimeout(function() { 
      el.css("width","200px"); 
     }, 1000); 
    }).mouseleave(function() { 
     clearTimeout(myTimeout); 
     el.css("width","100px"); 
    }); 

Answer 2

，你可以使用这个jQuery脚本：

var myTimeout; 
$('#div').mouseenter(function() { 
    myTimeout = setTimeout(function() { 
     //Do stuff 
    }, 1000); 
}).mouseleave(function() { 
    clearTimeout(myTimeout); 
}); 

见DEMO