[英]toogle not working when wrapped around 2 containers
我试图制作一个滑块,并在我单击箭头时使文本和图像滑动(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
问题是,当您切换其子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%(我不知道到底是什么原因造成的)与填充/边距有关吗?)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.