我希望 JQuery Animate 在展开时将内容下推

Question

有人能看到我在这里做错了什么吗？我希望内容能够展开，并在显示隐藏的 div 时将其下方的页脚向下推。这里有一个例子。不要介意可怕的颜色： http://www.kerrydean.ca/MATHESON/home5.html

CSS

.valveMenuWraps {
    background-color: #990;
    margin: 9px;
    float: left;
    height: 40px;
    width: 170px;
    overflow: hidden;
    padding: 5px;
    position: relative;
}
#valveMenu {
    background-color: #FFF;
    position: relative;
    height: 75px;
    width: 795px;
    left: 4px;
}

HTML

<div id="content">
    <div id="picMenu">
    <div id="first" class="pics"></div>
    <div id="second" class="pics"></div>
    <div id="third" class="pics"></div>
    <div id="fourth" class="pics" ></div>
    </div><!--end of pic menu-->
    <div id="valveMenu">
    <div id="controlWrap" class="valveMenuWraps">
    <div id="control"  style="position:relative">
    <p>
    vee ball<br />
    butterfly control<br />
    rotary eccentric plug<br />
    globe
    </p>
    </div></div>
    <div id="safteyWrap" class="valveMenuWraps">
    <div id="saftey" style="position:relative"></div></div>
    <div id="automatedWrap" class="valveMenuWraps">
    <div id="automated"></div></div>
    <div id="manualWrap" class="valveMenuWraps">
    <div id="manual">
    <p>soft seated ball valves<br />
        high performance butterfly valves<br />
        resilinet seated butterfly valves<br />
        metal seated ball valve<br />
        triple offset butterfly valves<br />
        multi-port ball valves<br />
        gate, globe, check valves<br />
        specialty check valves<br />
        knife gate valves<br />
        diaphram valves<br />
        pinch valves</p>
    </div></div>
    </div><!--end of valveMenu-->
    <div id="footer"><a href="test.html">HOME</a> | <a href="test.html">CONTACT US</a></div>
</div><!--end of content-->

和jQuery

$(document).ready(function(){

    //When mouse rolls over
    $("#controlWrap").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#controlWrap").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

谢谢！这个网站太棒了！

Answer 1

我在 #content 和 #footer 中添加了一个 float:left ，它工作得很好。

Answer 2

您需要做几件事。将 #valveMenu 的 CSS 更改为

#valveMenu {
    background-color: #FFFFFF;
    clear: both;
    left: 4px;
    overflow: auto;
    position: relative;
    width: 795px;
}

This 应使其下推页脚。

我删除了高度。并添加了溢出。