Maybe this question is confusing, but let me give you an example, when I click the button that switches the width, the div continues to animate after pressing the button, which doesn't look amazing. What I want is for the div to stop halfway and go the other way, and not complete its existing animation when the button is pressed again.
$(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>
Here's the violin so you can understand what I'm talking about. Try spamming the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
Thank you very much for your help, I've looked everywhere but can't seem to find any information on my problem.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can check if the element is not animated before performing the 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; }You can use the
.stop()method. Try this$(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; }