title: Prevent input until first action finishes?
body: <p>In my code I have a div that moves left and right when buttons are pressed. However, when I press the button multiple times it moves respective to the number of presses. What I want it to do is prevent any input to be given ( or the button to be pressed ) until after the animation has finished.</p>
  
  <p>I tried using a delay to keep the actions from 'queuing' but that simply put them off by a few seconds.</p>
  
  <p>Here is my code* currently as well as a jsfiddle example of the idea: <a href="http://jsfiddle.net/Sjfuv/" rel="nofollow">http://jsfiddle.net/Sjfuv/</a> (Yes they are different, the example is not made by myself)</p>
  
  <pre><code>jQuery(document).ready(function($) {
  var clickState = 0;
  var cssForState = [{
          'margin-left': '0px'
      },{
          'margin-left': '-850px'
      },{
          'margin-left': '-1700px'
      }];
  
  var advanceToNextClickState = function() {
      clickState++;
      if (clickState &gt;= cssForState.length)
          clickState = 0;
  };
  
  var previousClickState = function() {
      clickState--;
      if (clickState &lt; 0)
          clickState= 2;
  
  };
  $('.RButton').click(function (e) {
      console.log("Received click while clickState = " + clickState);
      advanceToNextClickState();
      $('.slideContain').delay(150).animate(cssForState[clickState]);
  });    
  
  $('.LButton').click(function (e) {
      console.log("Received click while clickState = " + clickState);
      previousClickState();
      $('.slideContain').delay(150).animate(cssForState[clickState]);
  });    
  });
  </code></pre>
  
  <p>*S/O to the user who helped me on my last question too, I like the way this works ^_^</p>