我可以延迟 jQuery addClass 吗？答案

【问题标题】：Can I delay jQuery addClass?我可以延迟 jQuery addClass 吗？
【发布时间】：2017-06-09 03:53:40
【问题描述】：

有没有办法延迟jQuery的addClass()？例如这段代码

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass');

当我加载页面时，它的类 'aNewClass' 已经在 id 'sampleID' 上。如何解决这个问题呢？我想要的是 addClass 将在它结束 fadeOut() 之后发生。

【问题讨论】：

【解决方案1】：

您不能直接延迟 addClass 调用，但是如果您将它包装在一个队列调用中，该调用将函数作为这样的参数，则可以

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')});

【讨论】：

【解决方案2】：

我想要的是 addClass 将 在淡出()结束后发生。

$('#sampleID').fadeOut(500, function(){
  $(this).addClass('aNewClass');
});

【讨论】：

【解决方案3】：

您不能对 delay 执行此操作，因为它只会影响效果队列。如果没有使用队列实现，它不会“暂停”后续代码的执行。

您需要使用setTimeout：

$('#sampleID').delay(2000).fadeOut(500, function() {
    setTimeout(function() {
        $(this).addClass('aNewClass');
    }, 2000);
});

这使用fadeOut的complete回调，然后设置一个函数在未来2秒执行。

【讨论】：

【解决方案4】：

你应该使用回调。

$('#sampleID').delay(2000).fadeOut(500,function(){
   $(this).delay(2000).addClass('aNewClass');
});

【讨论】：

【解决方案5】：

你也可以使用 setTimeout 和 CSS 过渡：

setTimeout(function() {
    $('#sampleID').addClass('aNewClass');
}, 2000);

还有 CSS

#sampleID {
transition: opacity 1s ease;
opacity: 0;
}

#sampleID.aNewClass {
opacity: 1;
}

【讨论】：