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

设置代码的方式，如果您碰巧在mouseleave容器上停留超过一秒钟，则不会发生.box动画。

这是因为timeoutId被触发后setTimeout被清除，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更好的选择，因为它们处理绑定对象后代的事件冒泡。

jsfiddle

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

1 个答案: