如何将div折叠到在style属性中设置的高度？

Question

下面是悬停时展开折叠div的代码。在div中多次单击超链接后，或者在多次鼠标悬停之后，当鼠标移出时，div有时不会折叠到其显示高度。

有没有办法将div折叠到鼠标输出时在div的style属性中设置的高度？我的示例页面是：http://apparelnbags.com:8000/showproduct2.aspx?ProductID=829 (选择在活动颜色块/分区中显示的不同颜色

 <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>

Div的css为

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

Div代码为

<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);         
     });
 });