javascript - アニメーションが完了するまでハイパーリンクを無効にする/クリックされた要素のハイパーリンクを無効にする

Question

クラス .overlay の div に複数の画像があり、1 つをクリックすると、2 つの変数の内容が 2 つの他の要素を埋めます。ただし、対処する必要があることがさらに 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

アニメーション中のクリックを防ぎ、アニメーションの完了時に解放されるミューテックスを設定できます。

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

Answer 2

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

    // rest of code
}, false);