如何在不影響父容器高度的情況下使div淡出和淡入-有解無憂

我有一個選項卡式部分，它.section__content根據單擊的選項卡展示 1 個區域。

在我下面的演示中，我使用了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/[email protected]/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>

uj5u.com熱心網友回復：

這里有一種使用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/[email protected]/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()，您可以將 csstransitions與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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388813.html

標籤：javascript 查询 css

上一篇：使用.each函式取值，然后編輯并將結果放入其他物件屬性中

下一篇：如果包含jQuery檔案，為什么PHPPDObindParam回傳null