Jquery 鼠标退出功能不工作，而我们离开鼠标非常缓慢

正常的鼠标离开功能工作正常，但是如果我们非常缓慢地离开鼠标，则鼠标离开功能不工作

var timeoutId;
$('.box').mouseover(function(){
        var $this=$(this);
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
            timeoutId = null;
                $this.animate({
                    marginTop:'-224px',
                    height:'300px'
                    })
    $this.find('.rotate-arrow').addClass('rotate');
    $this.find('.header-content-span').css('display','none');
                                                   },1000); }
            });
$('.box').mouseleave(function(){
        var $this=$(this);
         if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
            $this.animate({
                marginTop:'0px',
                height:'77px'
                })
    $this.find('.rotate-arrow').removeClass('rotate');
    $this.find('.header-content-span').css('display','block');

        }

---

按照设置代码的方式，如果您恰好在

.box

容器上停留一秒钟以上，则不会出现

mouseleave

动画

这是因为一旦触发

setTimeout

，就会清除

timeoutId

，并且

mouseleave

回调包含仅在定义了

timeoutId

时才执行动画的逻辑

要解决这个问题，只需从if语句中拉出动画。以下是一个简化的示例：

var timeoutId;
$('.box').mouseenter(function () {
    var $this = $(this);
    if (!timeoutId) {
        timeoutId = window.setTimeout(function () {
            timeoutId = null;
            $this.stop().animate({
                height: '100px'
            });
        }, 1000);
    }
});
$('.box').mouseleave(function () {
    var $this = $(this);
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    $this.stop().animate({
        height: '50px'
    });
});

注意：我之所以使用它，是因为它与事件类型相反。根据您的具体情况，这两个处理程序往往比使用

mouseover

和

mouseout

更好，因为它们处理绑定对象后代的事件冒泡的方式

---

您可以发布到工作页面或JSFIDLE的链接吗？