Perhaps the question may be a bit unclear, but allow me to provide an example. When repeatedly clicking the button that toggles the width, the div continues to animate long after the button press, which is not visually appealing. My desired outcome is for the div to pause midway through the animation and then reverse direction when the button is pressed again, rather than completing its current animation.
$(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>Check out this fiddle link to see exactly what I mean. Feel free to spam the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
I would greatly appreciate any assistance, as I have searched extensively but cannot find a solution to my issue.