我可以延迟jQuery addClass吗？

Question

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

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

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

Answer 1

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

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

请参阅此帖子：jQuery: Can I call delay() between addClass() and such?

Answer 2

  

我想要的是addClass会   在结束fadeOut（）之后发生。

您可以像这样使用callback function to fadeOut：

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

Answer 3

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

您需要使用setTimeout：

执行此操作

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

这使用fadeOut的complete回调，然后将函数设置为将来执行2秒。

Answer 4

你应该使用回调。

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

http://api.jquery.com/fadeOut/

Answer 5

你也可以使用setTimeout，CSS转换：

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

和CSS

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

#sampleID.aNewClass {
opacity: 1;
}