如何制作流暢的方塊影片？

幻燈片開口有抽搐，我該如何擺脫它們？

如果在最后一個塊上一切都或多或少正常，那么其余的甚至都沒有接近。如何使所有塊，除了被點擊的塊消失，其余塊平滑移動到螢屏中心然后打開。

$(document).ready(function() {

  let status = false;

  $(".block").on("click", function() {
    if (status == false) {
      $(".block").not($(this)).slideToggle();
      $(this).animate({
        maxWidth: "100%"
      }, 500).find(".slide").css("display", "flex").animate({
        width: "100%"
      }, 500);
      status = true;
    } else {
      $(this).animate({
        maxWidth: "32%"
      }, 500).find(".slide").css("display", "none").animate({
        width: "0%"
      }, 500);
      $(".block").not($(this)).slideToggle();
      status = false;
    }
  })

});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
  font-size: 10px;
}

body {
  background-color: #1c1c1e;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 100%;
  padding: 1rem 0;
}

.flex-block {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.block {
  display: flex;
  margin: 15px;
  justify-content: space-between;
  width: 100%;
  max-width: 32%;
  height: 200px;
  background-color: #464649;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

.block .slide,
.block .content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #d7d7df;
}

.block .slide {
  background-color: #303033;
  width: 0%;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <section class="test">
    <div class="flex-block">
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
    </div>
  </section>
</div>

uj5u.com熱心網友回復：

首先，不要使用 JQUERY，將代碼轉換為 vanilla JS。最好的方法是使用 JS 來應用/洗掉類并使用 CSS 進行所有轉換。

您有 JS 事件可以告訴您應用到塊的某個轉換是否已經結束（查找“ontransitionend”事件），這可以幫助您在需要的確切時間應用 CSS 或類。

uj5u.com熱心網友回復：

不知道這是你所追求的，但我會使用你的幻燈片切換和影片的回呼函式，所以在第一次點擊時，你先隱藏不需要的塊，然后顯示幻燈片，然后在第二次點擊時，你隱藏滑動然后顯示隱藏的塊：

$(document).ready(function() {

  let status = false;

  $(".block").on("click", function() {
    const $currentBlock = $(this); // get current clicked block

    if (status == false) {
      // hide non clicked blocks
      $(".block").not($currentBlock).slideToggle(function() {  
        // run this when slide toggle has finished
        $currentBlock.animate({
          maxWidth: "100%"
        }, 500).find(".slide").css("display", "flex").animate({
          width: "100%"
        }, 500);
      });
      status = true;
    } else {

      $currentBlock.animate({
        maxWidth: "32%"
      }, 500).find(".slide").animate({
        width: "0"
      }, 500, function() {
        // run this when slide has finished animating 
        $(this).css("display", "none");     // only hide the slide once the animation is finished
        $(".block").not($currentBlock).slideToggle();  // show the other blocks
      });
      status = false;
    }
  })

});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
  font-size: 10px;
}

body {
  background-color: #1c1c1e;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 100%;
  padding: 1rem 0;
}

.flex-block {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.block {
  display: flex;
  margin: 15px;
  justify-content: space-between;
  width: 100%;
  max-width: 32%;
  height: 200px;
  background-color: #464649;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

.block .slide,
.block .content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #d7d7df;
}

.block .slide {
  background-color: #303033;
  width: 0%;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <section class="test">
    <div class="flex-block">
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
      <div class="block">
        <div class="content">
          <p>Block</p>
        </div>
        <div class="slide">
          <p>Slide</p>
        </div>
      </div>
    </div>
  </section>
</div>

標籤：javascript html jQuery css

上一篇：如何在Shopify中使用Jquery隱藏表單欄位

下一篇：防止孩子被html5draggable拖拽