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

Question

我试图在 li 上悬停时显示内部 div。我正在做 fadeIn 和 fadeOut 效果，但问题是当我快速悬停在所有 li fadeIn 效果上时。仅当我将鼠标悬停在 li 上 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

您可以使用这个 jquery 脚本：

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

见DEMO

Answer 2

通过在变量名前添加 window 解决了这个问题。

var myTimeout;

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

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

Show popup on hover only if i hover on li after 1 second

html

javascript

jquery

hover