我的代码是：

$(function() {
  const fullSection = $(".fullsection");
  const container = $("#container");

  // closed fullSection => height:0%();
  $(".fullsection").each(function(index, item) {
    if (!$(item).hasClass("active")) {
      $(item).animate({
        height: "0%",
      });
    }
  });

  // openned fullSection => height:100%();
  var i = 500;
  $(".fullsection").each(function(index, item) {
    if (!$(item).hasClass("active")) {
      $(item).animate({
        height: "100%",
      }, i);
      //console.log(item);
      //console.log(i);
      i += 150;
    }
    // console.log(fullSectionInactive);
  });

  var sum = 0;
  $(fullSection).click(function(event) {
    var functionCompleted = false;
    var chosenWidth = $(this).css("width");
    var chosenWidthNum = parseInt($(this).css("width"));
    var widthactive = parseInt($(this).siblings(".active").css("width"));
    var widthInactive = parseInt(!$(this).siblings(".active").css("width"));
    // Check if there are any openned section
    // if so, closing.
    $(this).siblings().each(function(index, item) {
      var eachWidthNum = parseInt($(this).css("width"));
      if (Math.floor(eachWidthNum) == Math.floor(widthactive)) {
        $(item).removeClass("active");
      }
    });
    // and the clicked element expands
    // if(){
    $(this).addClass("active");
    // }
  });
});

/* reset */

@import url("reset.css");

/* font-family: 'Abril Fatface', cursive; */

/* 400 only */

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

/* global class */

body, html {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}

.fullsection {
  width: 5%;
  height: 100%;
  padding: 100px, 0;
  box-sizing: border-box;
  float: left;
  transition: width .3s ease-in-out;
  /* opacity: 0; */
}

.active {
  width: 85%;
}

.section_1 {
  background-color: tomato;
}

.section_2 {
  background-color: teal;
}

.section_3 {
  background-color: cornflowerblue;
}

.section_4 {
  background-color: slateblue;
}

<div id="container">
  <div class="fullsection section_1 active"></div>
  <div class="fullsection section_2"></div>
  <div class="fullsection section_3"></div>
  <div class="fullsection section_4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

我正在做一个只有js（jquery）的页面，面临着挑战。当我以慢克里思点击每个div（.fullSection）时，它工作得很好。然而，一旦我点击每个div与相对快的克里思，突然div（主要是第四个）抽搐和动摇。
我添加/删除类名是为了改变宽度，而不是使用animate();（不知道为什么，但它很难）
我想阻止用户在div仍在更改宽度时单击。或者任何可以阻止那些潜水员抽搐和摇晃的东西。
我使用return false尝试了is.("animating")
我想阻止用户在div仍在更改宽度时单击。或者任何能阻止那些潜水员抽搐和摇晃的东西