淡入淡出效果在第一次觸發時會閃爍，但隨后會按預期作業

更改選項卡時，我遇到了不想要的視覺效果。我想要的是為了。policyCentre__content部分慢慢淡出，也慢慢淡入相關部分。但是，當您最初更改選項卡時，如果這是第一次policyCentre__content加載匹配項，它將閃爍，而不是淡出。

請參閱重現步驟：

1. 運行以下演示（您將從“tab 1”活動開始。
2. 單擊“選項卡 2”并觀看內容出現（“選項卡 1”內容淡出，但“選項卡 2”的內容僅出現。
3. 單擊回傳“選項卡 1”，內容消失并按預期顯示。
4. 單擊回傳“選項卡 2”，它現在按預期作業。

不確定為什么第二步最初只是讓內容出現？

$(function() {

  function showContent(val){
    $(".policyCentre__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(window).scrollTop(0);
      $(".policyCentre__content[data-item='"   val   "']").addClass('active').fadeIn(500, function() {
        locked = false;
      })
    });
  }

  // prevent the UI from getting over-clicked
  let locked = false;

  $(".policyCentre__label:first, .policyCentre__content:first").addClass("active");

  $('.policyCentre__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');
    $(".policyCentre__label").removeClass("active");
    $(this).addClass("active");
    showContent(id);
  });
  
  });

.policyCentre {
  border: 1px solid black;
  padding: 60px 0;
}
.policyCentre__label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  width: fit-content;
  display: flex;
  align-items: center;
}
.policyCentre__label:hover, .policyCentre__label.active {
  color: orange;
}
.policyCentre__content {
  display: none;
  padding-left: 50px;
}
.policyCentre__content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="policyCentre">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-2">
        <div class="policyCentre__tabs">
          <span class="policyCentre__label" data-item="tab-1">Tab 1</span>
          <span class="policyCentre__label" data-item="tab-2">Tab 2</span>
          <span class="policyCentre__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-10">
        <div class="policyCentre__content" data-item="tab-1">Copy for tab 1</div>
        <div class="policyCentre__content" data-item="tab-2">Copy for tab 2</div>
        <div class="policyCentre__content" data-item="tab-3">Copy for tab 3</div>
      </div>

    </div>
  </div>
</section>

uj5u.com熱心網友回復：

我相信這是因為你的 CSS 中有這條規則：

.policyCentre__content.active {
  display:block;
}

...當您應用“活動”類時，這會迫使 div 立即顯示（而不是影片）。我洗掉了該規則，而是使用您的隱藏/顯示功能來顯示第一個選項卡（而不是依賴于該 display:block css 規則）。因為（對于第一次轉換）我們沒有隱藏任何內容，所以我將您的隱藏/顯示功能分成 2 個（transitionContent() 和 showContent()），所以我們可以showContent()最初呼叫。

$(function() {
  function transitionContent(val) {
    $(".policyCentre__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(window).scrollTop(0);
      showContent(val)
    });
  }

  function showContent(val) {
    $(".policyCentre__content[data-item='"   val   "']").addClass('active').fadeIn(500, function() {
      locked = false;
    })
  }

  showContent('tab-1')
  // prevent the UI from getting over-clicked
  let locked = false;

  $(".policyCentre__label:first, .policyCentre__content:first").addClass("active");

  $('.policyCentre__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');
    $(".policyCentre__label").removeClass("active");
    $(this).addClass("active");
    transitionContent(id);
  });

});

.policyCentre {
  border: 1px solid black;
  padding: 60px 0;
}

.policyCentre__label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  width: fit-content;
  display: flex;
  align-items: center;
}

.policyCentre__label:hover,
.policyCentre__label.active {
  color: orange;
}

.policyCentre__content {
  display: none;
  padding-left: 50px;
}

.policyCentre__content.active {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="policyCentre">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-2">
        <div class="policyCentre__tabs">
          <span class="policyCentre__label" data-item="tab-1">Tab 1</span>
          <span class="policyCentre__label" data-item="tab-2">Tab 2</span>
          <span class="policyCentre__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-10">
        <div class="policyCentre__content" data-item="tab-1">Copy for tab 1</div>
        <div class="policyCentre__content" data-item="tab-2">Copy for tab 2</div>
        <div class="policyCentre__content" data-item="tab-3">Copy for tab 3</div>
      </div>

    </div>
  </div>
</section>

標籤：

上一篇：頁面多載功能和初始化后的一些功能

下一篇：在一天中的不同時間播放視頻