Javascript 动画-jQuery-带延迟的fadeInUp

我有一组帖子，我正试图一个接一个地发帖。在我的实际例子中，它们是在砖石结构中，所以这会产生它们锁定在一起的效果。就像这里的帖子一样：

因此，对于这个示例，我将JSFIDLE放在一起：

其中包括：

HTML:

jQuery：

jQuery('.fade-in-post-container .elementor-post').addClass('animated fadeInUp');

因此，正如您可能看到的，我使用.css库Animate.css，并使用jQuery查找元素并对其应用requires.Animate.effect类

到目前为止，这非常有效，但正如您从JSFIDLE中看到的，它们都会立即消失，而不是一个接一个地相互关联

我考虑过如何利用这一点：

.each(function(i) {
jQuery(this).delay(250 * i)

如果我可以使用jQuery动画，哪一个可以呢？但我想这可能只是将类一次应用于一个元素，我尝试了，但它不起作用

---

我也尝试过用jQuery fadeIn或动画创建整个效果，但我发现很难找到可行的解决方案…

可能这就是你想要的

jQuery('.fade-in-post-container .elementor-post').each(function(i) {
    setTimeout(()=>{$(this).addClass('animated fadeInUp')}, 250 * i);
});

---

如果不想在开始时显示所有框，可以使用此JSFIDLE。。非常感谢Nimitkumar Shah，太完美了！正是我想要的！！然而，有一点，我在这里应用它：正如你们将看到的，它们并没有完全相互锁定。动画完成后，如果只调整窗口的大小一点，但是，贴子会彼此锁定。。。你知道为什么会这样吗？：）我在你的网站上找不到代码。。所以我忍不住。。如果您可以共享代码或jsfiddle，那么它将帮助meNo担心，Nimitkumar Shah-我不确定我是否可以在jsfiddle中复制它，因为实际的砖石布局是在Elementor页面生成器中构建的。我看看有什么我能弄明白的-再次感谢：）

.each(function(i) {
jQuery(this).delay(250 * i)

jQuery('.fade-in-post-container .elementor-post').each(function(i) {
    setTimeout(()=>{$(this).addClass('animated fadeInUp')}, 250 * i);
});