jquery - 防止多次点击启动动画

Question

我有一个 div 框，如果我双击它将扩展到整个页面。如果我按下 div 展开后生成的按钮，则 div 框将最小化回其原始大小。但是，如果我双击 div 框，该事件将被触发两次，展开 div 框然后立即将其最小化。所以我尝试使用 .one() 但没有意识到它只能工作一次。我可以使用什么来一次只允许单击一次而不触发多个事件？这是 jsbin，下面是严格的 jquery 代码。http://jsbin.com/eqezas/3/edit

$("#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;

});

Answer 1

尝试这样的事情：

var processing = false;  // Global variable

// Probably in document.ready:
$("#element").click(function () {
    if (!processing) {
        processing = true;
        $("#element2").animate({"blah": "blah"}, 1000, "easeOutBounce", function () {
            processing = false;
        });
    }
});

这样，无论你多次点击原始元素，它都处于“处理”状态，直到动画完成。