禁用超链接，直到动画完成/禁用已被点击的元素上的超链接

我有多个图片在div中与类.overlay，当点击一个变量的内容填充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); 
});

来源

2013-03-15 Chrismo16

查找如何使用event.preventdefault在jQuery中，这应该对你有所帮助。（我现在没有时间充分回答） – Zachrip 2013-03-15 02:41:28

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

    // rest of code 
}, false);

来源

2013-03-15 02:48:52

你可以设置一个互斥体，防止点击动画时与动画完成时被释放：

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

来源

2013-03-15 02:51:49

禁用超链接，直到动画完成/禁用已被点击的元素上的超链接

回答

相关问题