jquery延遲css div的位置

我試圖讓我的菜單欄部分隱藏大約5秒的不活動超時。菜單位於頁面頂部20px處，基本思想是，一旦菜單向上移動，菜單的一小部分仍然可見，以允許用戶將鼠標懸停在此上方，以便再次下降（希望這會使感！）。jquery延遲css div的位置

我管理了動畫方面，但不是超時。有什麼建議嗎？

2009-05-26 DanC

不幸的jQuery沒有延遲功能。但是，你可以使用一個偷偷摸摸的，而不是太骯髒的黑客模擬延遲，通過動畫元素的不透明度，從1到1：

$('#visibleElement')    // Assuming the element is already shown 
    .animate({opacity: 1.0}, 3000); // do nothing for 3 seconds

所以在鼠標離開後的5秒鐘內你的菜單向上滑動您可以執行以下操作：

$('#menuDiv').mouseout(function(){ 
    .animate({opacity: 1.0}, 5000) 
    .animate(slide up etc... 
});

來源

2009-05-26 11:00:53

這是不是隱藏5秒後菜單不考慮閒置在mousover事件，如果有超時，使用殺呢？就我的問題而言，它更多的是關於從非活動開始設置超時的邏輯...... – peirix 2009-05-26 11:02:34

公平點。將我的示例編輯爲mouseout而不是pageload。 – 2009-05-26 11:06:54

不透明黑客似乎工作正常，它讓我在菜單動畫向上之前我想要的位置5秒，很好！ – DanC 2009-05-26 11:26:15

您應該使用mouseout事件表示菜單div來實現這樣的功能：

var waitingForMenuToHide = false; 

function myOnMouseOut() { 
    waitingForMenuToHide = true; 
    setTimeout(function() { 
     if (waitingForMenuToHide) { 
      // Hide the menu div... 
     } 
    }, 5000); 
}

和mouseover事件重置waitingForMenuToHide變量：

function myMouseOver() { 
    waitingForMenuToHide = false; 
}

來源

2009-05-26 10:59:57

試着看着HoverIntent。 http://cherne.net/brian/resources/jquery.hoverIntent.html

這使得在用戶停止與菜單交互之後執行延遲操作非常容易。

來源

2009-05-26 11:01:15

在鼠標移出事件時，使用回調啓動超時以向上滾動元素。

clearTimeout(timer);

因此，這將是這樣的：

var timer; 
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */}); 
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});

來源

2009-05-26 11:28:47

jquery延遲css div的位置

回答

相關問題