Comment faire en sorte que l'animation de basculement de largeur de jquery s'arrête à mi-chemin pour se refermer ?

Question

Cette question prête peut-être à confusion, mais laissez-moi vous donner un exemple, lorsque je clique sur le bouton qui change la largeur, le div continue de s'animer après avoir appuyé sur le bouton, ce qui n'a pas l'air étonnant. Ce que je veux, c'est que le div s'arrête à mi-chemin et aille dans l'autre sens, et ne termine pas son animation existante lorsque le bouton est à nouveau enfoncé.

$(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>

Voici le violon pour que vous puissiez comprendre de quoi je parle. Essayez de spammer le bouton "Afficher le menu".

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

Merci beaucoup pour votre aide, j'ai cherché partout mais je n'arrive pas à trouver d'informations sur mon problème.

Answer 1

Vous pouvez vérifier si l'élément n'est pas animé avant d'effectuer l'animation

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;
}

sssccc
    
    
    
    
Show Menu

Answer 2

Vous pouvez utiliser la méthode .stop(). Essayez ceci

$(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;
}

sssccc

  

Show Menu