title: jQuery - Disable Click until all chained animations are complete
body: <h2>Question</h2>
  
  <p>The solution below is intended to slide down the <strong><em>groupDiv</em></strong> displaying <strong><em>div1</em></strong> and enough space for <strong><em>div2</em></strong> to slide in. It's all achieved by chaining the animations on the <strong><em>#Link.Click()</em></strong> element.</p>
  
  <p>It seems to <strong><em>bug out</em></strong>, though, when the <strong><em>link is clicked rapidly</em></strong>. Is there a way to prevent this? By perhaps disabling the Click function until the <strong><em>chained</em></strong> animations are complete? I currently have checks in place, but they don't seem to be doing the job :(</p>
  
  <p>Here's the code i'm using:</p>
  
  <h2>Custom animate functions.</h2>
  
  <hr>
  
  <pre><code>//Slide up or down and fade in or out
  jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
      if (this.is(":hidden")) {
          visibilityCheck("show", counter--);
          return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
      } else {
          visibilityCheck("hide", counter++);
          return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
      }
  };
  
  //Slide off page, or into overflow so it appears hidden.
  jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
      if (this.css('marginLeft') == "-595px") {
          return this.animate({marginLeft: "0"}, speed, easing, callback);
      } else {
          return this.animate({marginLeft: "-595px"}, speed, easing, callback);
      }
  };
  </code></pre>
  
  <hr>
  
  <h2>In the dom ready, i have this:</h2>
  
  <hr>
  
  <pre><code>$('#Link').toggle(
      function() {
          if (!$("#div2 .tab").is(':animated')) {
              $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
          }
      },
      function(){
          if (!$("#groupDiv").is(':animated')) {
              $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
          }
      }
  );
  </code></pre>
  
  <hr>
  
  <h2>HTML structure is this:</h2>
  
  <hr>
  
  <pre><code>&lt;div id="groupDiv"&gt;
       &lt;div id="div1"&gt;
            &lt;div class="tab"&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="div2"&gt;
            &lt;div class="tab"&gt;&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>