title: Prevent firing of other scripts while fadeIn/FadeOut running
body: <p>So I have 4 different sets of script that fadeIn/Out several divs when clicked.  The problem I am running into is if you mash/click a ton the fadeIn/Out effects blend together.  How can I set them to fire only after completion of a FadeIn/Out cycle?</p>
  
  <p>Here is my jquery scripts.  I can post the html if needed.</p>
  
  <pre class="lang-js prettyprint-override"><code>// 1st Navigation
  
  
  $("#1stforward").click(function() {
    $("#1st").fadeOut(3500, 'swing');
    $("#2nd").delay(3375).fadeIn(4500, 'swing');
  
  });
  
  
  
  //2nd Navigation 
  
  
  $("#2ndback").click(function() {
    $("#2nd").fadeOut(3500, 'swing');
    $("#1st").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  
  $("#2ndforward").click(function() {
    $("#2nd").fadeOut(3500, 'swing');
    $("#3rd").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  
  
  
  
  // 3rd Navigation 
  
  
  $("#3rdback").click(function() {
    $("#3rd").fadeOut(3500, 'swing');
    $("#2nd").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  
  $("#3rdforward").click(function() {
    $("#3rd").fadeOut(3500, 'swing');
    $("#4th").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  
  
  
  // 4th  Navigation 
  
  
  $("#4thback").click(function() {
    $("#4th").fadeOut(3500, 'swing');
    $("#3rd").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  
  $("#4thforward").click(function() {
    $("#4th").fadeOut(3500, 'swing');
    $("#5th").delay(3500).fadeIn(4500, 'swing');
  
  
  });
  </code></pre>