Bagaimana untuk membuat animasi lebar togol jquery berhenti di tengah jalan untuk menutup semula?

Question

Mungkin soalan ini mengelirukan, tetapi saya berikan contoh, apabila saya klik pada butang yang menukar lebar, div terus bernyawa selepas menekan butang, yang tidak kelihatan hebat. Apa yang saya mahu ialah div berhenti separuh jalan dan pergi ke arah lain, dan tidak melengkapkan animasi sedia ada apabila butang ditekan sekali lagi.

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

Ini biola supaya anda boleh faham apa yang saya cakapkan. Cuba hantarkan spam pada butang "Tunjukkan Menu".

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

Terima kasih banyak atas bantuan anda, saya telah mencari di mana-mana tetapi sepertinya tidak dapat mencari sebarang maklumat tentang masalah saya.

Answer 1

Anda boleh menyemak sama ada elemen tidak dianimasikan sebelum melakukan animasi

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

Anda boleh menggunakan kaedah .stop(). Cuba ini

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