試圖創建一個JQuery菜單，其子菜單在懸停時滑動，並在鼠標退出時向下滑動

我發現有人在教程中顯示我基本上是在之後，但是，演示是爲滑動子菜單而不是讓子菜單在菜單項上滑動。試圖創建一個JQuery菜單，其子菜單在懸停時滑動，並在鼠標退出時向下滑動

這裏是鏈接到教程：

http://www.darkscarab.com/blog/read.php?id=14

這裏是jQuery腳本它使用：

$(document).ready(function(){ 
    $(".submenu").slideUp(100, function(){$(".menu_item").css({overflow:'visible'})}); 
    $(".menu_item").hover(
     function(){ 
      if($(".submenu", this).queue().length < 2) 
       $(".submenu", this).slideDown(500); 
     },function(){ 
      $(".submenu", this).slideUp(500); 
     } 
    ); 
});

當我轉出的效果基本show的了slideDown，反之亦然，這件事可以很好地滑動起來（即使我不將它們切換出去也能正常工作！） - 但是當我退出時應該發生的滑動並不真正起作用。這就像子菜單消失，然後下一次我將鼠標懸停在下面的軌跡上。

基本上，這是所有的打嗝，非常不可靠。

任何人都對這個新手有什麼好的想法？

非常感謝！

來源

2010-05-20 heathwaller

.slideDown顯示一個從height:0開始的元素，然後將height屬性設置爲其最大值。 .slideUp將高度從其全部值降低到0，然後隱藏該元素。爲了創建你想要的動畫，你不能只是切換它們，因爲你希望slideUp顯示而不是隱藏，反之亦然。

如果我要構建描述的內容，我會在bottom:0的一個相對定位元素內絕對定位一個元素，這樣當我爲height屬性設置動畫時，它將從底部增長。然後我會創建function mySlideUp()，這樣它的內部元素display:none; height:0然後.animate({height:'auto'},'slow')。對於function mySlideDown()我想.animate({height:0},'slow')然後hide()。

我希望有幫助。由於您是新手，因此將其寫入僞jQuery中，您自己寫出來會對您有所幫助。祝你好運！

來源

2010-05-20 23:03:32 mVChr

謝謝你的精彩解釋，mhr。我實際上可以理解它:) 我將使用您提供的非常有用的信息來處理它，並且會在其他新手如果/當我弄清楚時發佈代碼。我真誠感謝您的幫助！ – heathwaller 2010-05-21 18:31:19

不客氣，但實際上，如果它有效，我會得到滿意的答覆和所有的感謝。 ;） – mVChr 2010-05-21 18:45:43

謝謝你的啓發。我會給你適當的積分爲你的幫助:) 這是我已經想出的代碼（有一些在你的代碼中建議的高度部分的麻煩）： $（function（）{（ $ '#menuli'）。hover（function（）{\t \t \t \t \t if（！$（this）.find（'a'）。parent（）。hasClass（'active'））{ $（this）。。找到（ 'UL'）的CSS（{能見度：「可見」，顯示：「無」}）！秀（500）; \t} \t \t \t}，函數（）{ \t \t如果（$（這個）.find（'a'）。parent（）。hasClass（'active'））{ \t \t \t $（this）.find（'ul：first'）。hide（500）; \t \t \t} \t \t}）; }）; 現在我得到了一點動畫隊列的構建 - 而.stop（）不能解決它。 – heathwaller 2010-05-22 15:44:01

爲尋找像我試圖實現一個導航菜單，下面的網站可能會有所幫助：

http://www.mrbandfriends.co.uk/

但使用MHR的意見，並通過如何B君看編碼他們的導航，我終於能夠得到一個可行的滾動導航麪包屑。

謝謝！

來源

2010-05-23 20:59:48 heathwaller

很高興你能工作。如果我自己寫出來併爲自己測試它，它會更快，但我相信你花費的時間將會通過你自己實現的內容來彌補。乾杯! – mVChr 2010-05-23 21:23:26

試圖創建一個JQuery菜單，其子菜單在懸停時滑動，並在鼠標退出時向下滑動

回答

相關問題