JQuery 随时间悬停

Question

我确实有一个 jquery 的问题。我有一个带有“show_your_stuff”的分区 block 。当我将鼠标悬停在另一个 div block 上时，就会出现我想要的。当我再次将鼠标移到上方时，divblock 消失了。我希望 divblock 在 60 秒后消失，而无需再次进行新的鼠标操作。有人可以帮助我吗？

这是我的代码:

    <script type="text/javascript">
    $(document).ready(function() {
        $("a#controlbtn").hover(function(e) {
            e.preventDefault();
            var slidepx=$("div#linkblock").width() + 10;
            if ( !$("div#maincontent").is(':animated') ) { 
                if (parseInt($("div#maincontent").css('marginRight'), 10) < slidepx) {

                  $(this).addClass('close').html('Show your stuffs');
                    margin = "+=" + slidepx;

                     } else {
                    $(this).removeClass('close').html('Hide your stuffs');
                     margin = "-=" + slidepx;
                }
                $("div#maincontent").animate({ 
                    marginRight: margin
                }, {
                    duration: 'slow',
                    easing: 'easeOutQuint'
                });
            } 
        }); 

    });
</script>

Answer 1

可以分别使用setTimeout和clearTimeout来延迟和取消鼠标离开和重新进入时的隐藏效果:

$(element).mouseover(function() {
    if (typeof delayTime != 'undefined')
        window.clearTimeout(delayTime);
    $('#tooltip').animate({/*CSS to show element*/},{duration: XXX, queue: false});
});
$(element).mouseout(function() {
    delayTime = window.setTimeout(function(){
        $('#tooltip').animate({/*CSS to hide element*/},{duration: XXX, queue: false});
    }, XXX);
});

...其中每个 XXX 都是代表延迟或持续时间(以毫秒为单位)的数字。