Question

JSFiddle

$('button').click(function(){
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
    });
});

我想使用CSS过渡和jQuery的延迟功能让一些文本淡入，然后在设定的时间后淡出。问题是，如果我多次单击该按钮，它会设置多个延迟，并且点击事件都是棘手的。我无法再预测文本什么时候会淡出。有没有办法可以阻止点击事件传播直到完全转换（淡入，延迟，然后淡出）完成？

Answer 1

您可以使用.one()绑定点击

var myfunction = function (){
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
        $('button').one('click', myfunction);
    });
}
$('button').one('click', myfunction);

或者

您可以使用.off()解除绑定事件

var myfunction = function (){
    $('button').off('click');
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
        $('button').on('click', myfunction);
    });
}
$('button').on('click', myfunction);

Answer 2

您可以添加以下条件：

if($('p').queue())

就像那样：

$('button').click(function(){

    if($('p').queue()) $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
    });
});

阻止单击事件并等待CSS转换完成

2 个答案:

或者