动画-jQuery-带延迟的fadeInUp

我有一组帖子,我正试着一个接一个地发帖。在我的实际例子中,它们是在砖石结构中,所以这会产生它们锁在一起的效果。就像这里的帖子: https://undsgn.com/uncode/blog/blog-full-width-masonry/

因此,在这个示例中,我创建了一个JSFiddle: enter link description here

其中包括:

HTML格式:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="fade-in-post-container">
  <div class="elementor-post">Post</div>
  <div class="elementor-post">Post</div>
  <div class="elementor-post">Post</div>
</div>

CSS格式:

.elementor-post {
  padding:20px 30px;
  display:inline-block;
  text-align:centre;
  background:red;
}

jQuery查询:

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

到目前为止,这非常有效,但是正如您从JSFiddle中看到的,它们都会立即淡入,而不是一个接一个地相互关联。。。

我想用这种方法:

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

我也尝试过用jqueryfadein或动画来创建整个效果,但是我发现很难找到一个可行的解决方案。。。