jquery：在效果之前添加延遲

我的網站上有浮動框。我在mousenter上顯示它並隱藏onmouseleave。就像這樣：jquery：在效果之前添加延遲

$(box).mouseenter(function(evt) {showBox();});

和

$(what).parent().mouseleave(function(evt) {hideBox();});

當我進行過「盒子」快速移動鼠標它顯示了。如何不在這種情況下顯示它？謝謝。

來源

2011-11-17 Nick

您可以發佈hideBox而showBox藏漢？也許做一個jsfiddle？ – BjarkeCK

var showTimer; 

$(box).hover(function(){ 
    // wait .5 sec to show the box 
    showTimer = setTimeout(showBox, 500); 

}, function(){ 
    // wipe timer so that showBox isn't called if < .5 sec 
    if(showTimer){ 
     clearTimeout(showTimer); 
     showTimer = null; 
    } 

    hideBox(); 
}

來源

2011-11-17 17:01:54

謝謝！有用。 – Nick

纏上你的setTimeout函數調用（）

$(box).mouseenter(function(evt) { setTimeout("showBox()",1000);});

，其中1000爲1秒。（1000 milisecond = 1秒）

編輯：

這可能是一個有點複雜，那麼我想。如果快速退出，則必須防止它出現。

var t; 
$(box).mouseenter(function(evt) { t = setTimeout("showBox()",1000);}); 
$(box).mouseleave(function(evt) { clearTimeout(t); }); 
$(what).parent().mouseleave(function(evt) {clearTimeout(t);hideBox();}); 
function showBox(){ 
    clearTimeout(t); 
    // the rest or your function 
}

來源

2011-11-17 16:56:18

當您快速完成鼠標移動時，它僅在1秒後顯示。這您將需要。但你也需要清除你的mouseleave的超時時間。對？ – BjarkeCK

是這樣的嗎？ –

我發現bindWithDelay插件對這類場景非常有用。

這是合租容易寫類似：

$(box).bindWithDelay("mouseenter", function() { ... }, 500);

此事件觸發之前增加500ms的延遲。它處理了事件觸發多次時必須設置/取消/重置定時器的所有工作。

（它也支持方便的節流選項更復雜的情況，你可以在鏈接閱讀）

來源

2011-11-17 17:02:51 njr101

你仍然需要取消事件 –

是的，這是事實，當然可以在'mouseleave'事件中完成。該插件與其他答案中發佈的代碼幾乎完全相同。我發現把所有的管道都隱藏起來很方便。特別是如果你在一頁上有幾個這樣的東西。 – njr101

jquery：在效果之前添加延遲

回答

相關問題