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/

动画-jQuery-带延迟的fadeInUp

1 个答案: