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是我想要滑动的容器，但是第二个是从底部进入而不是从侧面进入。

live：thenandnow.anytimeafter9.co.uk

Answer 1

问题是当您切换其子bannerHomeHeight的显示时，第一个滑块框架的homeImage1仍占用空间。

尝试切换bannerHomeHeight：

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

    });
});

[编辑]

这个问题是，当两个元素在动画期间并排时，它们会占用＆gt; 100％和一个被迫在下面。为了解决这个问题，我们可以给.bannerHomeHeight 2样式更改（最大高度和宽度），所以它如下：

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

通过这种方式，高度看起来不会改变以适应动画中的内容，并且98％的宽度足以防止2的组合变得超过100％（我不知道这是什么导致这个，我想与填充/边距有关？）

缠绕2个容器时切换不起作用

1 个答案: