jquery - 当我们非常缓慢地离开鼠标时，鼠标移出功能不起作用

Question

正常的鼠标离开功能可以正常工作，但如果我们非常缓慢地离开鼠标，那么鼠标离开功能将无法正常工作..

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');

        }

Answer 1

根据代码的设置方式，如果您碰巧在 .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'
    });
});

注意:我使用了 mouseenter因为它是与 mouseleave 相反的事件类型.根据您的具体情况，这两个处理程序往往是比使用 mouseover 和 mouseout 更好的选择，因为它们处理绑定(bind)对象后代的事件冒泡的方式。

jsfiddle