How to disable click event until animation is completed?
<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>
