Question

我目前正在尝试使用以下脚本解决问题。当你将鼠标悬停在某个区域上时，它应该会立即显示div，然后当你离开该区域时，它会在一段时间后消失。

这一切都像魅力一样，但问题是如果你将鼠标悬停在浏览器页面框架上并将鼠标悬停在它上面，那么当你将鼠标悬停在它上面时它就不会出现了。

非常感谢任何帮助，谢谢

$('.loginHider').mouseenter(function(){
        $('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
        $('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
    }).mouseleave(function(){
        setTimeout(function() {
            $('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
            $('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
        }, 1200);   
    });

〜马特

Answer 1

尝试

$('.loginHider').mouseenter(function () {
    //clear the existing timer
    clearTimeout($(this).data('mouseTimer'))
    $('.loginBar').stop(true, true).animate({
        marginTop: '0px'
    }, 150);
    $('#loggedIn').stop(true, true).animate({
        marginTop: '20px'
    }, 150);
}).mouseleave(function () {
    var timer = setTimeout(function () {
        $('.loginBar').stop(true, true).animate({
            marginTop: '-50px'
        }, 150);
        $('#loggedIn').stop(true, true).animate({
            marginTop: '-30px'
        }, 150);
    }, 1200);
    $(this).data('mouseTimer', timer);
});

JQuery - Mouseleave setTimeout错误

1 个答案: