當包裹在2個容器中時，toogle無法正常工作

Question

我試圖制作一個滑塊，並在我單擊箭頭時使文本和圖像滑動（img）

 <div class="col span_12_of_12 bannerHomeHeight">   
     <div class="homeImage1" id="homeBannerContainer1" style="display: block">
        <div class="homeImage">
            <h4>HIV</h4>
            <img src="/images/banner-hiv-icons.png" alt=""/>
        </div>

         <div class="homeBanner">
            <h3>HIV support materials for healthcare professionals, paitent groups and paitents</h3>
             <div class="homeArrow">
                <img src="/images/arrow.png" alt=""/>
            </div>
        </div>
    </div>
</div>


<div class="homeImage1" id="homeBannerContainer2" style="display: none">
    <div class="homeImage">
        <h4>HCV</h4>
        <img src="/images/banner-hep-icons.png" alt=""/>
    </div>

    <div class="homeBanner">
        <h3>HCV support materials for healthcare professionals, paitent groups and paitents</h3>
        <div class="homeArrow">
            <img src="/images/arrow.png" alt=""/>
        </div>
    </div>
</div>

我的J查詢是：

    $(function () {
    $(".homeArrow").on('click', function () {
        $('.homeImage1').animate({
            width: 'toggle'
        });

    });
    });

homeImage1是我要滑動的容器，但第二個容器要移至底部而不是從側面進入。

現場直播：thenandnow.anytimeafter9.co.uk

Answer 1

問題是，當您切換其子homeImage1的顯示時，第一個滑塊框架的bannerHomeHeight仍然占據空間。

嘗試改為切換bannerHomeHeight：

$(function () {
    $(".homeArrow").on('click', function () {
        $(".bannerHomeHeight").animate({
            width: 'toggle'
        });

    });
});

[編輯]

問題在於，當兩個元素在動畫過程中並排放置時，它們占據的比例大於100％，其中一個元素被迫置於下面。 為了解決這個問題，我們可以給.bannerHomeHeight 2個樣式更改（最大高度和寬度），如下所示：

.bannerHomeHeight {
    margin-top: -16px;
    min-height: 170px;
    background-color: #54565b;
    max-height: 170px;
    width: 98%;
}

這樣就不會看到高度隨着動畫的變化而變化以適應內容，並且98％的寬度足以防止兩者的組合超過100％（我不知道到底是什么原因造成的）與填充/邊距有關嗎？）