javascript - 禁用超链接直到动画完成/禁用已单击元素上的超链接

Question

我在 div 中有多张带有 .overlay 类的图片，当单击一张图片时，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);