Я хочу, чтобы JQuery Animate выталкивал содержимое при его расширении - PullRequest
Новая
       15

Я хочу, чтобы JQuery Animate выталкивал содержимое при его расширении

0 голосов
/ 16 апреля 2011

Кто-нибудь может увидеть, что я здесь не так сделал? Я хочу, чтобы содержимое расширялось и опускало нижний колонтитул под ним, когда оно раскрывало скрытый 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'})
    });

});

спасибо! этот сайт потрясающий!

Ответы [ 2 ]

0 голосов
/ 16 апреля 2011

Вам нужно будет сделать пару вещей. Измените CSS для #valveMenu на 

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

Это должно заставить его опуститься в нижний колонтитул.

Я снял высоту. И добавил переполнение.

0 голосов
/ 16 апреля 2011

Я добавил float: слева от #content и #footer, и он работает нормально.

...