我可以延迟jQuery addClass吗？

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

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

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

Answer 1

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

您可以像这样使用fadeOut回调函数 ：

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

Answer 2

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

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

看到这篇文章： jQuery：我可以在addClass（）之间调用delay（）吗？

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