Question

我的jquery有问题。我有一个带有“show_your_stuff”的divblock。当我在另一个div块上执行鼠标时，出现了我想要的内容。当我再次使用鼠标时，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是一个代表延迟或急促的数字，以毫秒为单位。

Answer 2

我不确定这对你有帮助，但值得一看。

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

Arron发布了一个链接！这是有效的：

http://jsfiddle.net/5M9as/

Craphunter

Answer 4

我也使用HoverIntent来完成这样的任务。它具有灵敏度和超时等功能。灵敏度意味着您可以在触发“out”事件之前将X个像素移离悬停项目，并在触发out事件之前超时hoveritem之外的时间。

JQuery随着时间的推移而悬停

4 个答案: