我想讓JQuery Animate在擴展時將內容向下推動

任何人都可以看到我在這裏做了什麼錯誤嗎？當它顯示隱藏的div時，我希望內容展開並將其下面的頁腳推下。這裏是一個例子。不介意可怕的顏色： http://www.kerrydean.ca/MATHESON/home5.html 我想讓JQuery Animate在擴展時將內容向下推動

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

});

的感謝！這個網站真棒！

來源

2011-04-16 Greg

我添加了一個float：left到#content和#footer，它工作正常。

來源

2011-04-16 16:32:55 locrizak

謝謝你的工作很棒！這是否工作，因爲它現在讓div保持離開？ – Greg 2011-04-16 17:26:20

浮動元素會將其拉出文檔的常規流程。用內容和頁腳兩種方式來重新設置流量，以便使所有內容都重新排列。 – locrizak 2011-04-16 17:50:34

你需要做一些事情。將#valveMenu的CSS更改爲

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

這應該使它下壓頁腳。

我刪除了高度。並添加溢出。

來源

2011-04-16 16:34:43 JohnP

我想讓JQuery Animate在擴展時將內容向下推動

回答

相關問題