Javascript 将鼠标悬停在多个div和delay中的一个上，然后放下子div

我知道有很多类似的问题像这样，我已经搜索和尝试了几个小时，但没有运气

我想做的很简单，我的页面中有多个块，就像这样 当用户将鼠标悬停在.frame元素上时，.description类将弹出

啊，很微妙

通过使用slideToggle而不是slideDown和slideUp，如果您在超时之前离开元素，则在退出时切换弹出窗口

var timer;

$(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideDown();}, 1000);

            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                descrip_out.slideUp(1000)
            }
        );    
    }
);

---

您可以在handler out函数中检查元素是否显示，然后应用toggle函数

从你的代码

 var timer ,isToggle;
  $(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideToggle();}, 1500);        
            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                if(descrip_out.css('display') !== 'none')
                descrip_out.slideToggle(1000)
            }
        );    
    }
);

---

这同样也可以用于显示和隐藏功能。slideToggle函数甚至在到达超时之前就被调用了，它无法工作

你可以看到

---

它到底有什么问题？您希望有什么行为？我希望只有当用户在帧中停留超过1秒时，才会弹出.description；在演示中，当你滑动它时，它仍然会被触发。对不起，太糟糕了grammar@DennisKao您所说的滑动是指鼠标指针停留在框架内和框架外。或者您正在移动电话中测试鼠标指针以进行滑动？不是在移动电话中，我的意思是，如果鼠标停留在框架上的时间小于1秒，我不希望出现。说明。非常感谢！但是……怎么会呢？！！如果您将鼠标悬停在元素上并在超时前退出，那么在退出时只需调用一次toggleSlide。这就是触发弹出窗口的原因，而不是超时。这是双稳态逻辑（如切换函数）的一个常见错误，为了安全起见，您应该始终尝试使用直接打开和关闭功能。谢谢伙计，从没想过，谢谢您的更正，真的。

var timer;

$(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideDown();}, 1000);

            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                descrip_out.slideUp(1000)
            }
        );    
    }
);

 var timer ,isToggle;
  $(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideToggle();}, 1500);        
            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                if(descrip_out.css('display') !== 'none')
                descrip_out.slideToggle(1000)
            }
        );    
    }
);

$(function() {
    var timeoutId;
    $(".frame").hover( showDesc, hideDesc );
});

function showDesc(){
 var descrip_in=$(".description",$(this))
 timer = setTimeout(function(){descrip_in.show(200);}, 1000);
}

function hideDesc(){
    var descrip_out=$(".description",$(this))
    clearTimeout(timer);
    descrip_out.hide(300)
}