仅当我在 1 秒后将鼠标悬停在 li 上时才在悬停时显示弹出窗口答案

【问题标题】：Show popup on hover only if i hover on li after 1 second仅当我在 1 秒后将鼠标悬停在 li 上时才在悬停时显示弹出窗口
【发布时间】：2016-04-24 11:17:33
【问题描述】：

我试图在 li 上悬停时显示内部 div。我正在做淡入淡出和淡出效果，但问题是当我快速将鼠标悬停在所有 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() 但没有成功。最后我尝试处理时间间隔，但现在我的代码已经停止工作。

【问题讨论】：

标签： javascript jquery html hover

【解决方案1】：

你可以使用这个 jquery 脚本：

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

见DEMO

【讨论】：

我已经做了一些更改，现在它停止工作了，请您现在告诉我问题jsfiddle.net/4a84mnvL
你把我的演示链接发给我...把你的更改发给我
我将此代码添加到我的网站。没有超时淡入淡出的作品 bt nt 超时..

【解决方案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");
    });

【讨论】：