Wie kann ich dafür sorgen, dass die JQuery-Toggle-Breite-Animation auf halbem Weg stoppt, um sie wieder zu schließen?

Question

Vielleicht ist diese Frage verwirrend, aber ich gebe Ihnen ein Beispiel: Wenn ich auf die Schaltfläche zum Ändern der Breite klicke, wird das Div nach dem Drücken der Schaltfläche weiter animiert, was nicht besonders toll aussieht. Ich möchte, dass das Div auf halbem Weg anhält und in die andere Richtung geht und seine vorhandene Animation nicht abschließt, wenn die Taste erneut gedrückt wird.

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").animate({
      width: 'toggle'
    });
  });
});

.menuContainer {
  height: 100px;
  width: 50px;
  float: left;
  position: relative;
  background-color: black;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
  <!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>

Hier ist die Geige, damit Sie verstehen, wovon ich spreche. Versuchen Sie, die Schaltfläche „Menü anzeigen“ zu spammen.

https://jsfiddle.net/x14usdga/5/

Vielen Dank für Ihre Hilfe. Ich habe überall gesucht, kann aber anscheinend keine Informationen zu meinem Problem finden.

Answer 1

您可以在执行动画之前检查元素是否没有动画

https://api.jquery.com/is/
https://api.jquery.com/animated-selector/

$(document).ready(function(){
  $('.menuToggle').click(function(){
    if( $('.menuContainer').is(':animated') ) { return false; }
    $(".menuContainer").animate({width: 'toggle'});
  }); 
});

.menuContainer{
    height: 100vh;
    width: 15vw;
    float: left;
    position: relative;
    background-color: black;
    display: none;
}

    
    
    
    
Show Menu

Answer 2

您可以使用.stop()方法。试试这个

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").stop().animate({
      width: 'toggle'
    });
  });
});

.menuContainer {
  height: 100px;
  width: 50px;
  float: left;
  position: relative;
  background-color: black;
  display: none;
}

  

Show Menu