Question

我在div中有多个带有.overlay类的图片，当点击一个时，2个变量的内容填充了2个其他元素。但是，还有两件事我需要解决。

我想在动画完成之前，所有.overlay元素都不可点击。
我希望点击的.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);

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

2 个答案: