title: using animation_enabled boolean to prevent multiple jquery animations at once will break after being spammed
body: <p>I have 4 links on my page which fade their respective divs in and out as well as adjusting the containing div's height where necessary. I only want one div on a page at a time and the onload visible div is labels_div.</p>
  
  <p>When the user spams these links the divs get out of sync or overlap each other. I have researched this and the best possible option is to use a boolean variable which is checked onclick of each link.</p>
  
  <p>The issue arises that when a user spams the links eventually the boolean value gets stuck on false thus preventing any more animations.</p>
  
  <p>Could somebody explain what I have done wrong? Thanks</p>
  
  <pre><code>var animation_enabled;
  animation_enabled = true;
  
  
  function open_labels_div(){
      if(!animation_enabled )return;
      animation_enabled = false;
      if($("#labels_div").is(':hidden')){
          if($("#charts_div").is(':visible')){
              $("#charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#labels_div").fadeIn(400, function (){
                  $("#charts_div").css("display","none");
                  $("#labels_div").css("display","inline-block");
              });
          }
          else if($("#blank_charts_div").is(':visible')){
              $("#blank_charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#labels_div").fadeIn(400, function (){
                  $("#blank_charts_div").css("display","none");
                  $("#labels_div").css("display","inline-block");
              });
          }
          else if($("#reorder_div").is(':visible')){
              $("#reorder_div").fadeOut(400, function(){animation_enabled = true;});
              var minus = $("#reorder_div").height()-100;
              $('#tab_content').animate({'height': '-='+minus},400,"linear");
              $("#labels_div").fadeIn(400, function (){
                  $("#reorder_div").css("display","none");
                  $("#labels_div").css("display","inline-block");
              });
          }
      }
  }
  
  function open_charts_div(){
      if(!animation_enabled )return;
      animation_enabled = false;
      if($("#charts_div").is(':hidden')){
          if($("#labels_div").is(':visible')){
              $("#labels_div").fadeOut(400, function(){animation_enabled = true;});
              $("#charts_div").fadeIn(400, function (){
                  $("#labels_div").css("display","none");
                  $("#charts_div").css("display","inline-block");
              });
          }
          else if($("#blank_charts_div").is(':visible')){
              $("#blank_charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#charts_div").fadeIn(400, function (){
                  $("#blank_charts_div").css("display","none");
                  $("#charts_div").css("display","inline-block");
              });
          }
          else if($("#reorder_div").is(':visible')){
              $("#reorder_div").fadeOut(400, function(){animation_enabled = true;});
              var minus = $("#reorder_div").height()-100;
              $('#tab_content').animate({'height': '-='+minus},400,"linear");
              $("#charts_div").fadeIn(400, function (){
                  $("#reorder_div").css("display","none");
                  $("#charts_div").css("display","inline-block");
              });
          }
      }
  }
  
  function open_blank_charts_div(){
      if(!animation_enabled )return;
      animation_enabled = false;
      if($("#blank_charts_div").is(':hidden')){
          if($("#labels_div").is(':visible')){
              $("#labels_div").fadeOut(400, function(){animation_enabled = true;});
              $("#blank_charts_div").fadeIn(400, function (){
                  $("#labels_div").css("display","none");
                  $("#blank_charts_div").css("display","inline-block");
              });
          }
          else if($("#charts_div").is(':visible')){
              $("#charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#blank_charts_div").fadeIn(400, function (){
                  $("#charts_div").css("display","none");
                  $("#blank_charts_div").css("display","inline-block");
              });
          }
          else if($("#reorder_div").is(':visible')){
              $("#reorder_div").fadeOut(400, function(){animation_enabled = true;});
              var minus = $("#reorder_div").height()-100;
              $('#tab_content').animate({'height': '-='+minus},400,"linear");
              $("#blank_charts_div").fadeIn(400, function (){
                  $("#reorder_div").css("display","none");
                  $("#blank_charts_div").css("display","inline-block");
              });
          }
      }
  }
  
  function open_reorder(){
      if(!animation_enabled )return;
      animation_enabled = false;
      if($("#reorder_div").is(':hidden')){
          var add = $("#reorder_div").height()-100;
          $('#tab_content').animate({'height': '+='+add},400,"linear", function(){animation_enabled = true;});
          if($("#labels_div").is(':visible')){
              $("#labels_div").fadeOut(400, function(){animation_enabled = true;});
              $("#reorder_div").fadeIn(400, function (){
                  $("#labels_div").css("display","none");
                  $("#reorder_div").css("display","inline-block");
              });
          }
          else if($("#charts_div").is(':visible')){
              $("#charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#reorder_div").fadeIn(400, function (){
                  $("#charts_div").css("display","none");
                  $("#reorder_div").css("display","inline-block");
              });
          }
          else if($("#blank_charts_div").is(':visible')){
              $("#blank_charts_div").fadeOut(400, function(){animation_enabled = true;});
              $("#reorder_div").fadeIn(400, function (){
                  $("#blank_charts_div").css("display","none");
                  $("#reorder_div").css("display","inline-block");
              });
          }
      }
  }
  
  &lt;div id='options_tabs'&gt;
      &lt;ul&gt;
          &lt;li onclick='open_labels_div()'&gt;&lt;a&gt;Labels&lt;/a&gt;&lt;/li&gt;
          &lt;li onclick='open_charts_div()'&gt;&lt;a&gt;Charts&lt;/a&gt;&lt;/li&gt;
          &lt;li onclick='open_blank_charts_div()'&gt;&lt;a&gt;Blank Charts&lt;/a&gt;&lt;/li&gt;
          &lt;li onclick='open_reorder()'&gt;&lt;a&gt;Reorder&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id='tab_content'&gt;
      &lt;div id='labels_div'&gt;
          &lt;p&gt;labels content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='charts_div'&gt;
          &lt;p&gt;charts content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='blank_charts_div'&gt;
          &lt;p&gt;blank charts content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id='reorder_div'&gt;
          &lt;p&gt;reorder content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>