如何在不影响父容器高度的情况下使div淡出和淡入

Question

我有一个选项卡部分，根据单击的选项卡显示1个.section__content区域。

在下面的演示中，我使用了fadeTo( "slow", 1 )而不是fadeOut()，因此父div在选项卡更改后并不总是调整大小。但是，如果单击tab-2，它将在tab-1所在的位置下方渲染(因为不透明度为0，但块高度仍然存在(。但是，如果我使用display: none，则渐变效果并不流畅。

$(function() {
$(".section__label:first").addClass("active");
$(".section__content:first").fadeIn();
$('.section__label').click(function() {
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content").fadeTo( "slow", 0 );
$(".section__content[data-item='"+id+"']").fadeTo( "slow", 1 );
});

});

.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
display: none;
border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1</p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2</p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

这里有一种使用fadeIn((和fadeOut((的方法。我还添加了一个锁定机制，以防止用户界面被过度点击。

https://api.jquery.com/fadein/

let locked = false;
$(function() {

$(".section__label:first").addClass("active");
$(".section__content:first").addClass("active");
$('.section__label').click(function() {
if (locked) return;
locked = true;
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content.active").fadeOut(500, function() {
$(this).removeClass("active");
$(".section__content[data-item='" + id + "']").addClass('active').fadeIn(1000, function() {
locked = false;
})
});
});

});

.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
</div>
</div>
</div>
</div>

这是另一个选择。您可以使用csstransitions以及opacity和max-height来创建手风琴效果，而不是hide()/show()。

$(function() {
$(".section__label:first").addClass("active");
$(".section__content:first").addClass("active");
$('.section__label').click(function() {
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content.active").removeClass('active');
$(".section__content[data-item='" + id + "']").addClass('active');
});

});

.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all .4s ease-in-out;
border: 1px solid red;
}
.section__content.active {
max-height: 1000px;
opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
</div>
</div>
</div>
</div>