Отключить гиперссылку до тех пор, пока анимация не завершит/отключит гиперссылку на элемент, который был нажат.

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; }); 
    } 
});