Question 15043 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make jquery toggle width animation stop midway to close again?

Maybe the question is confusing but let me give you an example, when I spam click the button that toggles the width, the div with keep on animating way after the button press and it doesn’t look amazing. What I want is for the div to stop midway 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 is the fiddle, so you can see what exactly what I’m talking about. Try spamming the "Show Menu" button.

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

Help would be greatly appreciated, I have looked everywhere and I can’t seem to find anything on my problem.

Tags:

2

Answers


  1. 0

    You can use .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;
}
    <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>
    Login or Signup to reply.
  2. 0

    You can check if element is not animated before do 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;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search