禁用超鏈接，直到動畫完成/禁用已被點擊的元素上的超鏈接

Question

我有多個圖片在div中與類.overlay，當點擊一個變量的內容填充2個其他元素。然而，還有兩件事需要解決。

1. 我希望所有.overlay元素在動畫完成前都是不可點擊的。

2. 我希望被點擊的.overlay保持不可點擊，直到點擊不同的.overlay。

代碼：

$('.overlay').on("click",function(){ 
    var text = $(this).attr("title"); 
     $('#category').animate({'opacity': 0}, 1000, function() { 
     $(this).text(text); 
     }).animate({'opacity': 1}, 1000); 
    var $clicked = $(this); 
     $('#description').animate({'opacity': 0}, 1000, function() { 
     $(this).text($clicked.data('text')); 
     }).animate({'opacity': 1}, 1000); 
}); 

Answer 1

document.querySelector('.overlay').addEventListener('click', function(e) { 
    e.preventDefault(); 

    // rest of code 
}, false); 

Answer 2

你可以設置一個互斥體，防止點擊動畫時與動畫完成時被釋放：

var mutex = false; 
$('.overlay').on("click",function() { 
    //flag to determine the last clicked overlay 
    $(this).data('active', true); 
    $('.overlay').not(this).data('active', false); 
    if (!mutex && !$(this).data('active')) { 
     mutex = true; 

     /* snip */ 
     //animation is complete, so allow clicking all overlay again 
     }).animate({'opacity': 1}, 1000, function() { mutex = false; }); 
    } 
});