當鼠標靠近時，jQuery有動畫

我一直在尋找一種方法來讓導航菜單從瀏覽器頂部向下滑動，當鼠標進入靠近它的區域並在鼠標離開菜單時消失。當鼠標靠近時，jQuery有動畫

我很接近謝謝this問題。

我遇到的問題是動畫。它表現得很奇怪。我已經在JsFiddle中模擬了我的代碼來查看。

http://jsfiddle.net/tVreF/2/

等待了片刻，將鼠標移動至頁面各處，嘗試調整窗口大小等，並最終將其動畫。顯然這不是預期的方式。

任何意見將不勝感激，因爲即時通訊不知道如果即時通訊這個正確的方式！

編輯：只是爲了澄清任何混淆 - 我的意思是導航菜單不會最初出現，然後當鼠標靠近屏幕頂部整個菜單本身滑下來。有點像將Windows任務欄設置爲「自動隱藏」時發生的情況。

來源

2012-09-19 Dan Mason

我所做的是改變了方法。我在這個搗鼓了一個事件捕手DIV：

http://jsfiddle.net/L2J5X/2/

，並添加事件處理程序，當鼠標過來該分區菜單動畫中，當鼠標移出格菜單動畫出來。

function dothething(amover) 
    { 
    if(amover) 
     { 
      $(".nav").animate({top: '0px'}, 200, "linear");  
     } 
     else 
     { 
      window.setTimeout(function(){if(!$amthere){ 
      $(".nav").animate({top: '-40px'}, 200, "linear");   
      }},100); 
     } 
    } 
     $("#detect").mouseover(function(){dothething(true);}); 
     $("#detect").mouseout(function(){dothething(false);}); 
$("#mainNav").mouseover(function(){$amthere=true;}); 
$("#mainNav").mouseout(function(){$amthere=false;}); 
$amthere = false;

的DIV絕對定位與頂部z指數因此事件總是被逮住。無論其他div如何隨機放置（請參閱偉大的綠色區塊）。

希望這會有所幫助。

*編輯*

增加了一個短暫的延遲，以防止隱藏的捕手DIV去菜單時。這就是$ amthere變量的用途，看看我們是否在菜單上。然後用100ms延遲檢查我們是否適合真正的鼠標移出，如果不是，則如果沒有，則隱藏隱藏菜單。

來源

2012-09-19 10:02:27 Tschallacka

我明白你的意思，但該鏈接帶我回到我原來的小提琴！（謝謝你的時間！） –

我已更新鏈接。忘了更新它;-)現在好了 – Tschallacka

非常感謝！它的所有工作現在！：D –

http://sperling.com/examples/menuh/
試試這個。你可以使用純CSS動畫...？

這可能不是您所需要的解決方案，但它是一個更好的選擇
編輯
在這種情況下，可以使導航欄的寬度（你寫它IsNear功能）爲20像素，寫onhover而不是總是檢查身體

來源

2012-09-19 09:49:42 Navaneeth

感謝您的快速回復，但我的意思是導航菜單一開始不會出現，那麼當鼠標靠近屏幕頂部時，整個菜單本身就會滑落。有點像將Windows任務欄設置爲「自動隱藏」時發生的情況。 –

檢查我的編輯在我的答案 – Navaneeth

當鼠標靠近時，jQuery有動畫

回答

相關問題