javascript - 如何将 div 折叠到样式属性中设置的高度？

Question

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

有没有办法在鼠标移出时将 div 折叠到 div 的样式属性中设置的高度？我的示例页面是： http ://apparelnbags.com:8000/showproduct2.aspx?ProductID=829 （选择活动颜色块/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>

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

试试这个 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);         
     });
 });

Answer 2

试试这个：在 each 之前$(this).animate(...)，调用$(this).stop()结束前一个动画。