2012-01-04 42 views
0

我確實遇到了jquery問題。我有一個帶有「show_your_stuff」的divblock。當我把鼠標放在另一個div塊上時,我想要什麼。當我再次移動鼠標時,divblock正在離開。我希望divblock在60秒後消失,而不需要再次做一個新的鼠標。有人能幫助我嗎?JQuery與時間懸停

這是我的代碼:

<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> 

回答

2

您可以使用setTimeoutclearTimeout當鼠標離開並重新進入分別推遲和取消隱藏效果:

$(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是表示延遲或以毫秒爲單位的數字。

+0

謝謝! #tooltip是我的div名稱嗎?我很抱歉,但它不起作用。 – craphunter 2012-01-04 22:40:51

+0

'#tooltip'是您試圖在mouseover/mouseout上顯示/隱藏的元素的虛擬'id'值。你需要用'class'或'id'或者其他選擇器替換它,這些選擇器有效地返回你在代碼中實際定位的元素。 – Aaron 2012-01-04 22:49:13

+0

你可以發佈我或/和CSS的html代碼嗎?但我想HTML代碼會更好。我真的不知道我做錯了什麼! – craphunter 2012-01-04 22:59:24

0

我用HoverIntent以及像這樣的任務。它具有諸如靈敏度和超時等功能。靈敏度的含義是,在觸發out事件之前,您可以將X個像素從您的懸停項目移開,並在觸發out事件之前在hoveritem之外超時。