javascript - 动画 - jQuery - 带延迟的 fadeInUp

Question

我有一组帖子，我正在尝试一个一个地淡入淡出。在我的实际示例中，它们是砖石结构的，因此这会产生将它们锁定在一起的效果。基本上喜欢这里的帖子: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');

因此，正如您可能看到的那样，我正在使用 .css 库 Animate.css 并且我正在使用 jQuery 来查找元素并将需要的 .animate .effect 类应用于它。

到目前为止效果很好，但是正如您从 JSFiddle 中看到的那样，它们都同时淡入淡出，而不是一个接一个地互锁...

我考虑过以某种方式利用它:

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

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

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

Answer 1

也许这就是你想要的..

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

https://jsfiddle.net/4zwgymu7/