如何使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() 的方法。我还添加了一个锁定机制来防止 UI 被过度点击。

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>

这是另一种选择。除了 hide()/show()，您可以使用 css transitions 以及 opacity 和 max-height 来创建手风琴效果。

$(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>