我可以延迟jQuery的addClass吗？

Question

有没有一种方法可以延迟jQuery的addClass()函数呢？例如这段代码：

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

当我加载页面时，id为'sampleID'的元素上已经有了'class aNewClass'。如何解决这个问题？我想要的是在fadeOut()结束后再添加'class aNewClass'。

- Ryan

Answer 1

您无法直接延迟addClass调用，但是如果将其包装在接受函数作为参数的queue调用中，则可以这样做。

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

请查看这篇文章：jQuery: 我可以在 addClass() 和其他方法之间调用 delay() 吗？

- Dave

Answer 2

我想要的是，在完成 fadeOut() 后再执行 addClass。

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

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

- Sarfraz

---

你还没有替换掉非功能性的 delay 调用。 - lonesomeday

@lonesomeday：在代码中这不应该有影响，但还是谢谢你的关注 :) - Sarfraz

Answer 3

使用delay无法做到这一点，因为它只影响效果队列。如果后续代码没有使用队列实现，则不会“暂停”执行。

您需要使用setTimeout来实现：

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

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

- lonesomeday

Answer 4

您也可以使用CSS过渡和setTimeout函数：

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

和 CSS 相关

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

#sampleID.aNewClass {
opacity: 1;
}

- brandozz

Answer 5

你应该使用回调函数。

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

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

- Arshdeep