如何將div摺疊到其在樣式屬性中設置的高度？

Question

下面是用於展開懸停div的代碼。在多次單擊div中的超鏈接或多次鼠標懸停後，有時div在鼠標移出時不會摺疊到其顯示高度。

有什麼辦法可以將div摺疊到它在div的樣式屬性中設置的高度嗎？ 我的示例頁面： http://apparelnbags.com:8000/showproduct2.aspx?ProductID=829 （選擇在Active顏色顯示不同的顏色塊/ DIV

<script type='text/javascript' src='/jscripts/jquery-1.5/jquery-1.5.js'></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       var divHeight; 
       var contentHeight ; 
       $('.expand').hover(function() { 
        divHeight = $(this).height(); 
        contentHeight = 0; 
        $(this).children().each(function() { 
         contentHeight += $(this).height(); 
        }); 
        if (divHeight < contentHeight) { 
         $(this).animate({ 
          height: contentHeight 
         }, 300); 
        } 
       }, function() { 
        if (divHeight < contentHeight) { 
         $(this).animate({ 
          height: divHeight 
         }, 300); 
        } 
       }); 
      }); 
     </script> 

CSS的股利是

div.expand 
{ 
    border: 1px solid #C8C8C8;overflow-y: scroll; -ms-overflow-y:scroll; 
} 

股利代碼是

<div class="text_theme_red_bold" style="Display:block;margin-top: 15px;width:438px">Active Colors:<br/> 
    <div id="Color_Active" class="expand" style="Display:block;margin-top: 8px;padding:5px 0px 5px 5px; height:36px;"> 
     (!Dynamic_Contents!) 
    </div> 
</div> 

Answer 1

試試這個：在每個$(this).animate(...)之前，請致電$(this).stop()以結束先前的動畫。

Answer 2

試試這個JS出來：

$(document).ready(function() { 
    var startHeight = $('.expand').height(); 
    var fullHeight = 0 
    $('.expand').children().each(function() { 
     fullHeight += $(this).height(); 
    }); 
    $('.expand').mouseenter(function(){ 
     $(this).stop(); 
     $(this).animate({ 
      height: fullHeight 
     }, 320); 
    }); 
    $('.expand').mouseleave(function(){ 
     $(this).stop(); 
     $(this).animate({ 
      height:startHeight 
     }, 320);   
    }); 
});