Preventing multiple clicks from initiating animate
<p>I have a div box that if I double click will expand to the entire page. If I press a button that is produced once the div has expanded, the div box will minimize back to its original size. However, if I double click the div box, the event will be triggered twice, expanding the div box then immediately minimizing it. So I tried using .one() but did not realize that it only works once. What could I use to allow only one click at a time without firing multiple events? Here is the jsbin and below is strictly the jquery code. <a href="http://jsbin.com/eqezas/3/edit" rel="nofollow">http://jsbin.com/eqezas/3/edit</a></p>

<pre><code>$("#block").one('click', function(){
            $('#block1').hide();
  $("#block").animate({ 
    width: "100%",
    height: "100%",
    opacity: 0.4,
    fontSize: "3em", 

  }, 1500, function() {
    $('#but').show();  
     });


});


$('#but').one('click',function() {
            $('#block1').show();
      $("#block").animate({ 
    width: "100px",
    height: "40px",
    opacity: 1,
    fontSize: "1em", 

  }, 1500 );
            $('#but').hide(); 
    return false;

});
</code></pre>
