jquery - 我可以延迟 jQuery addClass 吗？

Question

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

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

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

score 21 · Accepted Answer

您不能直接延迟 addClass 调用，但是如果将其包装在队列调用中，该调用将函数作为参数，如下所示

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

score 12 · Accepted Answer

我想要的是 addClass 将在它结束之后发生 fadeOut()。

您可以使用回调函数来fadeOut喜欢这样：

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

score 1 · Accepted Answer

你不能这样做，delay因为它只影响效果队列。如果没有使用队列实现，它不会“暂停”后续代码的执行。

你需要这样做setTimeout：

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

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

score 0 · Accepted Answer

你应该使用回调。

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

score 0 · Accepted Answer

您还可以使用 setTimeout 和 CSS 过渡：

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

和 CSS

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

#sampleID.aNewClass {
opacity: 1;
}

5 回答 5