Javascript t缠绕在2个容器周围时，无法工作

我正在尝试制作一个滑块，并在单击箭头（img）时制作文本和图像幻灯片

homeImage1是我想要滑动的容器，但第二个容器进入底部，而不是从侧面进入

---

live:thenandnow.Anytime after 9.co.uk

问题是您的

横幅高度

，因为当您切换其子

homeImage1

的显示时，第一个滑块帧仍然在那里占用空间

尝试切换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%就足以防止2的组合超过100%（我不知道到底是什么原因造成的，我想这与填充/边距有关？）

您是否尝试过将所有内容都放在带有类bannerHomeHeight的主div中？我尝试过，但我只希望图像和文本移动，而不是整个横幅，因为如果您现在看，它看起来真的很混乱。很抱歉，我在示例中替换了错误的类，但我想您知道我的意思。我明白你说的乱七八糟是什么意思。我会在一秒钟内更新一个新的建议，我正在考虑使用任何东西。。我从来没用过，抱歉。我以前使用过Orbit图像滑块，发现它没有任何麻烦。

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

    });
});

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