jQuery動畫菜單高度

嘿，我有以下jsfiddle>Fiddle，我需要一些幫助。jQuery動畫菜單高度

當我將鼠標懸停在它上面時，它會展開爲一個靜態寬度，但根據文本長度，它將通過內部文本$（'。inner'）。height（）抓取它。

問題在於它有點太過於最後一個文本列表項目，當我翻轉菜單框中的任何文本時，它會稍微向後滑動。如何防止它（1）向後滑動並且（2）具有所需的確切高度而在箱的底部甚至沒有額外的空間用於其高度？

的JS：

$(document).ready(function() { 
    $('#menuSquare, .inner').mouseout(function() { 
     theMenu('close'); 
    }); 

    $('#menuSquare, .inner').mouseover(function() { 
     theMenu('open'); 
    }); 
}); 

function theMenu(what2Do) { 
    if (what2Do == 'open') { 
     $('#menuSquare').stop().animate({ 
      width: 190, //95 
      height: $('.inner').height(), 
      duration:900, 
      'padding-top' : 10, 
      'padding-right' : 10, 
      'padding-bottom' : 10, 
      'padding-left' : 10, 
      backgroundColor: '#fff', 
      opacity: 0.8 
     }, 1000,'easeOutCubic') 
    } else { 
     $('#menuSquare').stop().animate({ 
      width: "20", 
      height: "20", 
      padding: '0px', 
      backgroundColor: '#e51937', 
      opacity: 0.8 
     }, 500,'easeInCirc') 
    } 
}

的HTML：

<div id="menuSquare" class="TheMenuBox" style="overflow: hidden; width: 20px; height: 20px; background-color: rgb(229, 25, 55); opacity: 0.8; padding: 0px;"> 
    <div class="inner"> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Custom Homes');">Custom Homes</p> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Full Service Hotels');">Full Service Hotels</p> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Mixed Use');">Mixed Use</p> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Office');">Office</p> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Retail');">Retail</p> 
     <p style="text-decoration:none; color:#666; cursor: pointer; " onclick="changeImg('Select Service Hotels');">Select Service Hotels</p> 
    </div> 
</div>

來源

2012-12-10 StealthRT

「問題的存在是它去有點太遠遠超出了最後一個文本列表項，當我翻身任何菜單中的文本它滑回了一點。」 - 我不明白 – davidkonrad

這是因爲<div class="inner">的最小widht的。當<div class="menuSquare" >沒有消耗時，<div class="inner">的值爲110px，因此<p>中的文字包裝成兩行或更多行。然後$(.inner).height()得到（自動換行）高度您<div class="inner">

所以出算出這個概率，只是改變你的最小寬度190（同爲<div class="menuSquare">）

來源

2012-12-10 04:08:03 Teifi

你明白了，Teifi！謝謝！ – StealthRT

我不能完全確定什麼你想要的，但

height: $('.inner').height(),

我想這是問題，嘗試

height : 20px

更新：

max-height { 
    20px; 
}

來源

2012-12-10 04:10:04 davidkonrad

該列表會增長，所以如果我給它一個靜態高度，那麼所有其他菜單項將被切斷。 – StealthRT

jQuery動畫菜單高度

回答

相關問題