title: How to disable click event until animation is completed?
body: <p>I want to disable the 'click' event until an animation is completed. </p>
  
  <p>Mark Up</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data-name="item1" class="nav"&gt;Item 1&lt;/li&gt;
      &lt;li data-name="item2" class="nav"&gt;Item 2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my jQuery Code</p>
  
  <pre><code>$('.nav').live('click', function(){
       $('.nav').unbind('click');
  
       var itemId = $(this).data('name');
  
       if( itemId === 'item1') {
           $('#item1').animate({
               'left' : '300'
           }, 300, function(){
               $('.nav').bind('click');
           });
      } else if( itemId === 'item2') {
           $('#item2').animate({
               'left' : '300'
           }, 300, function(){
               $('.nav').bind('click');
           });
      }
  });
  </code></pre>
  
  <p>The above code doesn't seem to work. How do I fix it?
  [If I click on 'Item 2' before 'Item 1's animation is completed, 'Item 2' also starts animating. I want to be able to animate only one at a time]</p>