如何防止快速点击时div抖动？

Question

我的密码是：

$(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 仍在改变宽度时点击。 或者任何可以阻止那些 div 抽动和摇晃的东西..

我已经尝试过

is.("animating")

使用

return false

我想阻止用户在 div 仍在改变宽度时点击。 或者任何可以阻止那些 div 抽动和摇晃的东西。

Answer 1

您可以disable button or div on its click event before animation and enable it at the animation completes.您可以使用动画 callback 来启用按钮或 div.

$( "#clickme)" ).on( "click", function() {
   // disable button here
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // enable button. it invoke on animation completion 
  });
});

Answer 2

如果您使用

ontransitionend

，您可以检测动画何时结束并处理状态以允许发生新动画。 也许这可以为您解决。

$(this).on('transitionend', function(){
    isAnimating = true
 });

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

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

    let timing = 500;
    fullSection.each(function(index, item) {
        if (!$(item).hasClass("active")) {
            $(item).animate({
                height: "100%",
            }, timing);
            timing += 150;
        }
    });
    let canWeAnimate = true;



    fullSection.click(function(event) {
        if (!$(this).hasClass('active')) {
            if (canWeAnimate) {
                canWeAnimate = false
                let _this = $(this),
                    chosenWidth = _this.css("width"),
                    chosenWidthNum = parseInt(_this.css("width")),
                    widthactive = parseInt(_this.siblings(".active").css("width")),
                    widthInactive = parseInt(!_this.siblings(".active").css("width"));



                _this.siblings().each(function(index, item) {
                    var eachWidthNum = parseInt($(this).css("width"));
                    if (Math.floor(eachWidthNum) == Math.floor(widthactive)) {
                        $(item).removeClass("active");
                    }
                });

                _this.addClass("active");
                
                // after the css transition has completed we can animate again::
                _this.on('transitionend', function() {
                    canWeAnimate = true;
                });

            }
        }


    });

});

/* 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>