Question

我试图在li上悬停显示内部div。我正在做fadeIn和fadeOut效果，但问题是当我快速悬停在所有li fadeIn效果上。只有当我在li上悬停1秒并且如果我在一秒钟之前离开该元素它应该显示它应该显示它不应该显示fadein效果。

<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

你可以使用这个jquery脚本：

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

请参阅DEMO

Answer 2

能够通过在变量名称前添加窗口来解决此问题。

var myTimeout;

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

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

2 个答案: